css单行文本与多行溢出文本的省略号问题

在文字布局和代码编写过程中遇到文本溢出是常有的事，下面总结一下对于单行文本溢出和多行文本溢出省略号的处理。

一。单行文本省略号

<p class="text1">
这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本
</p>

.text1{
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

这里拿一段简单的文字示例单行文本溢出：

　　这里的width属性是必须的，因为需要知道它的宽度是多少，才能判断溢出；

　　overflow属性使为了隐藏溢出的文本；

　　white-space:

　　text-overflow:

二。多行文本省略号

<p class="text2">
这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本
</p>

.text2{
height:53px;
width:100px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}

上面说过的在这里就不再多说了。

在这里height属性和overflow属性相结合是为了隐藏省略号一下的文本，大家可以试一下不加的效果，就一目了然了。

line-clamp属性是为了控制文本显示多少行。

关于display和box-orient，在这里简单说一下：

　　说明：必须定义display属性才可以对box进行划分。

　　box-orient 属性指定一个box子元素是否应按水平或垂直排列。

如果还是不太明白，大家可以访问网址：http://wenlong883.blog.163.com/blog/static/1718109162011102281912385/或在w3c里看css各个属性。