Der Teil, der das CSS-Limit der angezeigten Zeichen überschreitet, wird durch eine Ellipse dargestellt.

Um sicherzustellen, dass die Seite sauber und schön ist, müssen wir in vielen Fällen oft Text ausblenden, der die Länge überschreitet. Dies wird häufig in Listenelementen, Titeln, Namen usw. verwendet.

(1). Der Text überschreitet eine Zeile. Lassen Sie den überschüssigen Teil weg und zeigen Sie „...“ an.

Wenn dies häufig vorkommt, können Sie einen Klassennamen auswählen, der zur Wiederverwendung passt .

.line-limit-length {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; //文本不换行，这样超出一行的部分被截取，显示...
}
<p class="item">
<p class="line-limit-length">最新消息：神秘地球黑洞深不可测，不停吸入周围海水。</p>
<i class="icon icon-arrow-go"></i> //图标字体
</p>

(2) Sie können eine Containerbreitenbeschränkung angeben und der überschüssige Teil wird weggelassen

.product-buyer-name {
max-width: 110px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<h5 class="product-buyer-name">橘子橘子</h5>

Das obige ist der detaillierte Inhalt vonDer Teil, der das CSS-Limit der angezeigten Zeichen überschreitet, wird durch eine Ellipse dargestellt.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!