Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Bagaimana untuk menetapkan bahagian yang berlebihan supaya tidak dipaparkan dalam html

Bagaimana untuk menetapkan bahagian yang berlebihan supaya tidak dipaparkan dalam html

藏色散人
藏色散人asal
2021-09-13 14:57:576810semak imbas

Cara untuk menetapkan bahagian HTML yang melebihi untuk tidak dipaparkan: 1. Dengan menetapkan "width:10em;" untuk memastikan bahawa teks tidak akan dipotong oleh aksara separuh Cina; : hidden;" untuk menyembunyikan teks yang melebihi panjang ;3. Tetapkan elipsis melalui "text-overflow:ellipsis;".

Bagaimana untuk menetapkan bahagian yang berlebihan supaya tidak dipaparkan dalam html

Persekitaran pengendalian artikel ini: sistem Windows 7, versi HTML5&&CSS3, komputer Dell G3.

Bagaimana untuk menetapkan lebihan bahagian html supaya tidak dipaparkan?

Sembunyikan tetapan HTML yang berlebihan

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 10em; /*保证文字不会被半汉字截断,显示10个文字*/
            overflow: hidden; /*超出长度的文字隐藏*/
            text-overflow:ellipsis;/*文字隐藏以后添加省略号*/
            white-space: nowrap; /*强制不换行*/
        }
    </style>
</head>
<body>
    <div>
        文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到,我想很多人都碰到过吧,这个有两种解决方法
    </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 10em; /*保证文字不会被半汉字截断,显示10个文字*/
            overflow: hidden;
            /*出现省略号*/
            text-overflow: ellipsis;
            /*是在第几行*/
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
    <div>
        文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到,我想很多人都碰到过吧,这个有两种解决方法
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 10em; /*保证文字不会被半汉字截断,显示10个文字*/
overflow: hidden; /*超出长度的文字隐藏*/
text-overflow:ellipsis;/*文字隐藏以后添加省略号*/
white-space: nowrap; /*强制不换行*/
}
    </style>
</head>
<body>
    <div>
        文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到,我想很多人都碰到过吧,这个有两种解决方法
</div>
</body>
</html>

Pembelajaran yang disyorkan: "tutorial video css"

Atas ialah kandungan terperinci Bagaimana untuk menetapkan bahagian yang berlebihan supaya tidak dipaparkan dalam html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn