Heim  >  Artikel  >  Web-Frontend  >  So stellen Sie ein, dass der überschüssige Teil nicht in HTML angezeigt wird

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

藏色散人
藏色散人Original
2021-09-13 14:57:576750Durchsuche

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

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn