The portion exceeding the CSS limit of displayed characters is indicated by an ellipse.

In order to ensure that the page is clean and beautiful, in many cases, we often need to hide text that exceeds the length. This is commonly used in list items, titles, names, etc.

(1). The text exceeds one line, omit the excess part and display '...'

If this happens frequently, you can choose a class name that suits the function for reuse.

.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). The container width limit can be given, and the excess part will be omitted

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

The above is the detailed content of The portion exceeding the CSS limit of displayed characters is indicated by an ellipse.. For more information, please follow other related articles on the PHP Chinese website!