Home > Article > Web Front-end > css displays ellipses beyond the part_html/css_WEB-ITnose
css displays ellipses beyond the part_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:58:531216browse
Code: overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
Key code: text-overflow: ellipsis;
Explanation: The simple understanding is that I want to limit the text to one line (white-space: nowrap;), make sure this line is limited (width), and your overflow part needs to be hidden (overflow: hidden;), and then an ellipsis appears ( text-overflow: ellipsis).
text-ellipsis is a special style. The explanation is as follows: the text-overflow attribute is just an annotation, whether to display an omission mark when the text overflows. There are no other style attribute definitions. To achieve the effect of generating ellipses when overflowing, you must also define: forcing text to be displayed in one line (white-space:nowrap) and overflowing content to be hidden (overflow:hidden). Only in this way can the effect of displaying ellipses in overflowing text be achieved.
Code:
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title> css 超出部分显示省略号</title></head><body> <div id="div1" style="width: 100px; background: #ccc; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">省略号啊省略号啊省略号啊</div> 重点样式是 text-overflow: ellipsis; <br /> text-ellipsis是一个特殊的样式，有关解释是这样的：text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。 简单理解就是我要把文本限制在一行（white-space: nowrap;），肯定这一行是有限制的(width)，并且你的溢出的部分要隐藏起来（overflow: hidden；），然后出现省略号（ text-overflow: ellipsis）。</body></html>