Css is used to automatically omit the title content beyond the length range, with a mouse prompt

Most of the time, we want some text (such as the title of the news block on the homepage) to be displayed in a row, and when it exceeds its length range, we add... omitted, and a prompt is displayed.
 
Solution: first look at the example. The two items in the table are identical. If the length is exceeded, a prompt is displayed. Note that the second line, on the left side, is omitted because the container width is insufficient. On the right side, it is in normal mode because the width is sufficient. You can also adjust the "View" text size "of IE to a different word size, refresh it, And then tune it a few times. Here is the relevant sample code. You can modify it and run it:
<Style>
# Leftnewstd. ellipsis_row {width: 170px}
# Rightnewstd. ellipsis_row {width: 250px}
. Ellipsis_row {
Overflow: hidden;
Text-overflow: ellipsis;
White-space: nowrap;
Wzy: expression (this. title = this. offsetWidth <this. children (0). offsetWidth? This. children (0). innerText :'',
This. style. wzy =''
);
Background-color = # b0b0b0;
}
</Style>
<Table> <tr>
<Td id = leftnewstd width = 200px bgcolor = # f0f0ff>
<Span class = ellipsis_row> <span> comments from the top 20 famous schools in the U.S. computer science field, which started from open source </span> <br>
<Span class = ellipsis_row> <span> Microsoft database management challenges </span> <br>
<Span class = ellipsis_row> <span> WWW: Who has been ups and downs in 15 years? </Span>
</Td>
<Td id = rightnewstd width = 280px bgcolor = # f0fff0>
<Span class = ellipsis_row> <span> comments from the top 20 famous schools in the U.S. computer science field, which started from open source </span> <br>
<Span class = ellipsis_row> <span> Microsoft database management challenges </span> <br>
<Span class = ellipsis_row> <span> WWW: Who has been ups and downs in 15 years? </Span>
</Tr> </table>
 

Explanation: overflow, text-overflow, and white-space in a style are combined to implement the omitted function. Css expression. Add a prompt. Use this. offsetWidth <this. children (0). offsetWidth to determine whether the content exceeds the container width. If yes, add the title prompt. After the expression is applied, use this. style. wzy = ''to clear it to avoid affecting page efficiency.