在文字布局和代码编写过程中遇到文本溢出是常有的事，下面总结一下对于单行文本溢出和多行文本溢出省略号的处理。
一。单行文本省略号
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 中的 <pre> 标签。 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 |
| 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各个属性。
------------------------------------------------------------------------------------------------------------------
最近在做展开收起的效果，关于css方面简单的分享给大家
前提：文本超过3行后显示...展开
方法1 遮挡尾部文本
<p class="text">
这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本
<span class="tips">展开</span>
</p>
.text{
width: 200px;
height: 75px;
line-height: 25px;
overflow: hidden;
position: relative;
}
.text:after {
content: "...";
position: absolute;
bottom: 0;
right: 0px;
width: 70px;
padding-left: 4px;
background: linear-gradient(to right, transparent, #fff 0);
}
.tips {
position: absolute;
bottom: 0;
right: 20px;
z-index: 2;
}
原理就是遮挡文本尾部，换成... 然后将展开放到遮挡部分的上面
这种写法有个缺点就是可能会出现文本尾部只遮挡了一半的字，影响美观
方法二 shape-outside文本包装
<div class="text"> <div class="hide"></div> <p>这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本</p> <span class="tips">展开</span> </div>
.text{ height:75px; line-height: 25px; width:200px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; position: relative; } .hide{ height: 75px; width: 200px; float: right; shape-outside: polygon(200px 50px, 200px 75px, 150px 75px, 150px 50px); } .tips { position: absolute; bottom: 0; right: 20px; z-index: 2; }
原理就是在文本尾部画个矩形，根据shape-outside的属性文本将会围绕在这个矩形显示，...的效果也就随之显示在前面了
shape-outside的好处是他不会有显示半个字的时候
展开收起的效果如何实现这里就不赘述了
