文字溢出

文字溢出

text-overflow 处理文字溢出

设置当文本溢出元素范围时是否使用一个省略标记（…）表示溢出的内文本内容。
text-overflow : clip | ellipsis
clip : 　不显示省略标记（…），而是简单的裁切。
ellipsis : 　当对象内文本溢出时显示省略标记（…）。
Text-overflow的使用：

div{
	width: 50px;
	border:solid 1px red;
	white-space: nowrap;            
	overflow: hidden;
	text-overflow: ellipsis; 
}

white-space 、overflow、text-overflow 这三个属性一个都不能少，必须配合使用，才能出效果。
这种方法文字只能显示一行，如果想显示两行或显示多行后超出的内容才显示省略标记，这种方法是无法实现的。可以用下面的方法…

实战中的文字溢出

元素显示2行文本（行数根据需求自定义），超出的文字内容删除，以省略标记（…）表示删除的内容。

div{
    width: 300px;
    height: 30px;
    line-height: 15px;
    word-break: break-all;  /*设置文字的换行方式*/
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;   /*设置文字显示的行数是两行*/
    -webkit-box-orient: vertical;
}

这样就能实现显示2行或者显示多行后，超出的文字删除，以省略标记（…）表示删除的内容。

代码中：
overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2;
-webkit-box-orient: vertical;
这四个样式属性是一个固定组合，一个都不能少，元素必须同时拥有这些样式属性，才能实现效果。这四个样式属性已经可以处理文字溢出了，其他属性看情况设置即可。
代码中还要注意：
height: 30px; line-height: 15px; -webkit-line-clamp: 2;
三者之间的关系。 高度 = 行高 * 行数
word-break: break-all; 只是元素的换行方式，根据需求设置即可。

× 请我吃糖~