您的位置:首页 > Web前端 > CSS

css处理超出文本截断问题的两种情况(多行或者单行)

2017-09-21 20:18 127 查看
1.非多行的简单处理方式:

[b]css代码:[/b]

.words{
width:400px;
overflow:hidden;  /*超过部分不显示*/
text-overflow:ellipsis;  /*超过部分用点点表示*/
white-space:nowrap;/*不换行*/
}


2.规定行数的截断处理方式

css代码:

.words{
  width:400px;
text-overflow: ellipsis; /*有些示例里需要定义该属性,实际可省略*/
display: -webkit-box;
-webkit-line-clamp: 2;/*规定超过两行的部分截断*/
 -webkit-box-orient: vertical;
 overflow : hidden;
word-break: break-all;/*在任何地方换行*/
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: