css word length limitation text display, the excess automatically display ellipses, prevent overflow to the second row

In order to ensure the page clean and beautiful, in a lot of time, we often need to hide the text exceeds the length. This is common to entry in the list, title, name and other places.

Results are as follows:

Show unrestricted length, if exceeded will overflow into the second line. Seriously affect the user experience and display.

We add css styles to the list, as shown below.

Modified effect:

---

Start of Text

(1). Text exceeds one line, the excess will be omitted, show '...'

If this more, can take the role of a suit for multiplexing class name.

.line-limit-length {

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap; //文本不换行，这样超出一行的部分被截取，显示...

}

<div class="item">

<p class="line-limit-length">最新消息：神秘地球黑洞深不可测，不停吸入周围海水。</p>

<i class="icon icon-arrow-Go"></i> //图标字体

</div>

 

 

(2) can be given container width limit, the excess will be omitted

.product-buyer-name {

max-width: 110px;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

<h5 class="product-buyer-name">橘子橘子</h5>

 

<h5 class="product-buyer-name">橘子橘子匿名用户匿名</h5>

 

---

Copyright Notice:

• This article from: drilling Mans blog    css word length limitation text display, the excess automatically display ellipses, prevent overflow to the second row
• This article reprinted from the tutorial section: ranson:
• css limit the display of words, the excess length of the text represented by ellipsis [turn]