CSS limits the number of characters displayed, and the excess text length is represented by an ellipsis

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

(1) If the text exceeds one line, the excess part is omitted, and '...' is displayed.

If there are many such cases, you can take a class name with a corresponding effect for reuse.

.line-limit-length {

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap; //The text does not wrap, so the part beyond one line will be intercepted and displayed...

}

<div class="item">

<p class="line-limit-length">Latest news: Mysterious Earth's black hole is unfathomably deep, constantly sucking in the surrounding seawater. </p>

<i class="icon icon-arrow-go"></i> //icon font

</div>



(2). The container width limit can be given, and the excess part is omitted

. product-buyer-name {

max-width: 110px;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

<h5 class="product-buyer-name">orange orange</h5>