如何使用:文本溢出时显示省略标记（...）text-overflow : ellipsis

text-overflow

语法： 
text-overflow : clip | ellipsis
 
参数： 
clip : 　不显示省略标记（...），而是简单的裁切
ellipsis : 　当对象内文本溢出时显示省略标记（...）
 
说明：
设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。
对应的脚本特性为textOverflow。请参阅我编写的其他书目。
 
示例： 
div { text-overflow : clip; }

好多人在使用后看到效果：

 

text -overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义：强制文 本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样才能实现溢出文本显示省略号的效果。

 

<div style="width:40px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;">${task.comments}</div>

 

 

white-space : normal | pre | nowrap

normal : 　默认处理方式
pre : 　用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐。参阅pre对象
nowrap : 　强制在同一行内显示所有文本，直到文本结束或者遭遇br对象。参阅td，div等对象的nowrap属性（特性）

 

 

overflow : visible | auto | hidden | scroll

visible : 　不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto : 　此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 　不显示超过对象尺寸的内容
scroll : 　总是显示滚动条