Text that exceeds the specified length is expressed by a ellipsis

A news title in a news list that is frequently encountered during development is too long. In this case, you can add a set of CSS rules to it to hide the characters that exceed the box and display the ellipsis at the end.

Style:

<style type="text/css">.fixlength {border:1px solid black;display:block;width:700px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}</style>

Explanation:

White-spaceHow to process the blank space in an element in attribute settings

White-space: nowrap; indicates that the text will not wrap, and the text will continue on the same line until the <br> label is encountered.

Overflow: hidden;Hide the excess part.

Text-overflowAttribute specifies what happens when a text overflow contains elements.

Value	Description
Clip	Trim text
Ellipsis [ɪ ˈ l ɪ ps ɪ s]	Show omitted characters to represent the trimmed text
String	Use the given string to represent the trimmed text

It is better to show the effect of the text including the hidden part by adding the mouse over the text. The Code is as follows:

.fixlength:hover{overflow:visible;}

Shows the effect:

Reference: http://www.cnblogs.com/super_x/archive/2008/11/15/1334291.html