Heim >Web-Frontend >Front-End-Fragen und Antworten >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:576810Durchsuche
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.
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!