CSS省略号代码，单行多行文字省略号css实例代码

CSS省略号代码，单行、多行文字省略号css代码实例。
一、单行文字标题省略号代码实例

.css{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}

white-space属性，在文本内容超出容器宽度时处理。
text-overflow属性，规定当文本溢出包含元素时发生的事情，ellipsis为省略号。

二、多行文字段落省略号代码实例
多行文本显示省略号有两种办法
第一种： 使用定位伪元素遮盖末尾文字，css代码实例

<style type="text/css">
.box{
width: 200px;
height: 100px;
background-color: pink;
overflow: hidden;/* 溢出隐藏 */
line-height: 20px;/* 设置行高与容器高度成倍数关系，这样避免文本溢出时，文字显示一半 */
text-align: justify;/* 设置文本对齐方式为两端对齐，这样在伪元素内容遮盖末尾文字时才能对齐*/
position: relative;/* 子绝父相，这里是为了给伪元素设置定位*/
}
/* 因为省略号是放在文本最后面的，所以使用伪元素after */
.box::after{
content: "...";/* 省略号是放在文本最后面的 */
width: 1em;/* 设置伪元素的宽度为1em，是为了遮盖的时候正好遮盖中原来的一个字的大小*/
background-color: pink;/* 设置与父元素相同的背景颜色，同理，也是为了和原来的内容样式保持一致*/
position: absolute;/*设置定位，其位置就是文本的右下角 */
right: 0;
bottom: 0;
}
</style>
<div class="box">我是文本我是文本我是文本我是文我是文我是文我是文我是文我是文我是文我是是文本我是文本我是文本我是文本我是文本我是文本我是文本</div>

优点：适用范围广泛。
缺点：当内容没有超出容器范围之外时，也会在右下角显示省略号。


第二种办法： 利用旧版弹性盒css完整代码：

<style type="text/css">
/* 多行文本溢出隐藏显示省略号方法二：兼容性写法,因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端 */
.box{
width: 200px;
height: 100px; 如果设置了高度，且高度超过文本显示行数，在第三行会正常出现省略号，但是三行之后的仍然正常显示*/
background-color: pink; /* 设置高度是行高的倍数，防止文本露出一半 */
line-height: 20px;/* 旧版弹性盒 */
display: -webkit-box;/* 弹性盒子元素垂直排列 */
-webkit-box-orient: vertical;/* 控制要显示的行数 */
-webkit-line-clamp: 3;
overflow: hidden;
}
</style>
<div class="box">我是文本我是文本我是文本我是文我是文我是文我是文我是文我是文我是文我是是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本</div>

优点： 兼容性比较好
缺点： 如果设置了高度，且高度超过文本显示行数，在第三行会正常出现省略号，但是三行之后的仍然正常显示。