您的位置:首页 > 其它

文字溢出省略号显示

2017-08-25 20:41 92 查看
1、单行

overflow:hidden; 文字溢出隐藏

text-overflow:clip : 不显示省略标记(...),而是简单的裁切

text-overflow:ellipsis : 当对象内文本溢出时显示省略标记(...)

2、文字超过两行省略号显示

        overflow:hidden; 
text-overflow:ellipsis;
display:-webkit-box; 
-webkit-box-orient:vertical;
-webkit-line-clamp:2; (此属性定义行数)

注意:

一、仅定义text-overflow:ellipsis; 不能实现省略号效果。

二、定义text-overflow:ellipsis; white-space:nowrap; 同样不能实现省略号效果

三、同时应用: text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 可实现所想要得到的溢出文本显示省略号效果:

四、若想在Td 里使用此效果,要把当前的table的样式定义为 table-layout:fixed,并为单元格Td 设置宽度;否则单元格仍然会随着字的长度变长 。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: