Bagaimana untuk menetapkan bahagian yang berlebihan supaya tidak dipaparkan dalam html-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menetapkan bahagian yang berlebihan supaya tidak dipaparkan dalam html

藏色散人

Lepaskan： 2023-01-11 09:19:50

asal

6800 orang telah melayarinya

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>

Salin selepas log masuk

<!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>

Salin selepas log masuk

<!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>

Salin selepas log masuk

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!