一。单行文本省略号
1 p class=text1>2 这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本3 p>
.text1{ width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
这里拿一段简单的文字示例单行文本溢出：
这里的width属性是必须的，因为需要知道它的宽度是多少，才能判断溢出；
overflow属性使为了隐藏溢出的文本；
white-space:
值描述
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 html 中的 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。
text-overflow:
值描述
clip 修剪文本。
ellipsis 显示省略符号来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。
二。多行文本省略号
1 p class=text2>2 这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本3 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子元素是否应按水平或垂直排列。
值说明
horizontal 指定子元素在一个水平线上从左至右排列
vertical 从顶部向底部垂直布置子元素
inline-axis 子元素沿着内联坐标轴（映射到横向）
block-axis 子元素沿着块坐标轴（映射到垂直）
inherit box-orient 属性的值应该从父元素继承
如果还是不太明白，大家可以访问网址：http://wenlong883.blog.163.com/blog/static/1718109162011102281912385/或在w3c里看css各个属性。