Tip: Text-overflow: ellipsis

In the past few days, the company's Intranet has a lot of processing on the homepage to intercept strings. Currently, at my level, only functions in the jstl expression are used to intercept strings, the code with excessive truncation length omitted is as follows:

$ {Fn: substring (STR, 0, length)} <br/> <C: If text = "$ {fn: length (STR) GT length}">... </C: If>

Disadvantages of the above Code: 1. It is too rigid. If the number of words is greater than the length, only the string with the length is displayed. As a result, if the letter (the letter is narrower than the number) is intercepted, it is shorter and not beautiful; 2. dependent on the jstl Library; 3. High code redundancy; 4. incomplete titles, making it difficult for search engines to search.

Let's take a look at the magical effect of CSS. I admire the Code:

<Div style = "width: 230px; Border: 1px solid blue; overflow: hidden; text-overflow: ellipsis"> <br/> <nobr> indicates a line of text, a long row cannot be displayed in the table. </nobr> <br/> <nobr> This is the text that should not be wrapped, This is the text that should not be wrapped in a line, this is the end of the text line. </Nobr> <br/> </div>

Explanation: The <nobr> </nobr> label is opposite to the <br/> label, indicating no line breaks. The most powerful one here is text-overflow: ellipsis; let's take a look at the explanation of this attribute in CSS:

Syntax:
Text-overflow: Clip | ellipsis

Parameters:
Clip: do not show the omitted mark (...), but simply crop
　　(Clip is not commonly used !)
Ellipsis: when the object text overflows, the omission mark (...) is displayed (...)

Note:
Sets or retrieves whether an omission mark (...) is used to indicate text overflow in the object.
The biggest drawback is that the text-overflow: ellipsis attribute has no effect in ff.

Pay attention to the following points when using: (the following article from: http://www.mb5u.com/divcssjiaocheng/14015.html)

1. Define only text-overflow: ellipsis; ellipsis is not supported.

<MCE: style type = "text/CSS"> <! -- <Br/> ul {width: 300px; margin: 50px auto ;}< br/> Li {width: 300px; line-Height: 25px; text-overflow: ellipsis ;} <br/> A {color: # 03c; font-size: 13px ;}< br/> A: hover {color: #000 ;} <br/> --> </MCE: style> <style type = "text/CSS" mce_bogus = "1"> ul {width: 300px; margin: 50px auto ;} <br/> Li {width: 300px; line-Height: 25px; text-overflow: ellipsis ;}< br/> A {color: # 03c; font-size: 13px ;}< br/> A: hover {color: #000 ;}</Style > <Br/> <ul> <br/> <li> CSS practices-Pro CSS Techniques <br/> <li> CSS practices: the ID is a sniper rifle. The class is a double-edged sword. The combination of the two benefits is two points. <br/> <li> CSS layout example: CSS Tag switching code example tutorial <br/> <li> Web Standard: changing the Way of Thinking about creating web pages saves code, structure, and performance separation <br/> <li> solutions for IE7 or earlier versions do not support several methods without a-state pseudo classes! <Br/> <li> Use CSS to remove the default TD spacing of a table and create a 1px line table <br/> </ul>

2. Define text-overflow: ellipsis; white-space: nowrap; similarly, it cannot achieve ellipsis.

<MCE: style type = "text/CSS"> <! -- <Br/> ul {width: 300px; margin: 50px auto ;}< br/> Li {width: 300px; line-Height: 25px; text-overflow: ellipsis; white-space: nowrap ;}< br/> A {color: # 03c; font-size: 13px ;}< br/> A: hover {color: #000 ;} <br/> --> </MCE: style> <style type = "text/CSS" mce_bogus = "1"> ul {width: 300px; margin: 50px auto ;} <br/> Li {width: 300px; line-Height: 25px; text-overflow: ellipsis; white-space: nowrap ;}< br/> A {color: # 03c; font-size: 13px ;}< br/> A: hover {color: #000 ;} </style> <br/> <ul> <br/> <li> CSS practices-Pro CSS Techniques <br/> <li> CSS practices: the ID is a sniper rifle. The class is a double-edged sword. The combination of the two benefits is two points. <br/> <li> CSS layout example: CSS Tag switching code example tutorial <br/> <li> Web Standard: changing the Way of Thinking about creating web pages saves code, structure, and performance separation <br/> <li> solutions for IE7 or earlier versions do not support several methods without a-state pseudo classes! <Br/> <li> Use CSS to remove the default TD spacing of a table and create a 1px line table <br/> </ul>

3. Simultaneous application: Text-overflow: ellipsis; white-space: nowrap; overflow: hidden; achieves the ellipsis effect of the overflow text to be obtained:
<MCE: style type = "text/CSS"> <! -- <Br/> ul {width: 300px; margin: 50px auto ;}< br/> Li {width: 300px; line-Height: 25px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden ;}< br/> A {color: # 03c; font-size: 13px ;}< br/> A: hover {color: #000 ;}< br/> --> </MCE: style> <style type = "text/CSS" mce_bogus = "1"> ul {width: 300px; margin: 50px auto ;}< br/> Li {width: 300px; line-Height: 25px; text-overflow: ellipsis; white-space: nowrap; overflow: hidde N ;}< br/> A {color: # 03c; font-size: 13px ;}< br/> A: hover {color: #000 ;} </style> <br/> <ul> <br/> <li> CSS practices-Pro CSS Techniques <br/> <li> CSS practices: the ID is a sniper rifle. The class is a double-edged sword. The combination of the two benefits is two points. <br/> <li> CSS layout example: CSS Tag switching code example tutorial <br/> <li> Web Standard: changing the Way of Thinking about creating web pages saves code, structure, and performance separation <br/> <li> solutions for IE7 or earlier versions do not support several methods without a-state pseudo classes! <Br/> <li> Use CSS to remove the default TD spacing of a table and create a 1px line table <br/> </ul>

Please pay special attention that the text-overflow: ellipsis attribute has no effect in ff. (Y_y)