So stellen Sie ein, dass der überschüssige Teil nicht in HTML angezeigt wird-Front-End-Fragen und Antworten-php.cn

So stellen Sie ein, dass der überschüssige Teil nicht in HTML angezeigt wird

藏色散人

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

Original

6760 Leute haben es durchsucht

So stellen Sie ein, dass der überschrittene Teil von HTML nicht angezeigt wird: 1. Durch die Einstellung „width:10em;“, um sicherzustellen, dass der Text nicht durch halbchinesische Zeichen abgeschnitten wird; um den Text auszublenden, der die Länge 3 überschreitet. Mit „text-overflow:ellipsis;“ werden die Auslassungspunkte festgelegt.

So stellen Sie ein, dass der überschüssige Teil nicht in HTML angezeigt wird

Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.

Wie stelle ich ein, dass der überschüssige Teil nicht im HTML angezeigt wird?

Überschüssige Teile der HTML-Einstellungen ausblenden

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Empfohlenes Lernen: „CSS-Video-Tutorial“

Das obige ist der detaillierte Inhalt vonSo stellen Sie ein, dass der überschüssige Teil nicht in HTML angezeigt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!