CSS文字省略：一行或多行省略

CSS文本省略

1. html结构

<div class="box">
        我是这个靓仔我是这个靓仔我是这个靓仔我是这个靓仔我是这个靓仔我是这个靓仔
</div>

1.1 效果

2. 一行文本省略

.box {
      width: 200px;
      height: 100px;
      border: 1px solid red;
      /* 盒子居中显示，100px是上下margin，auto是左右自动调整 */
      margin: 100px auto;
      /* 强制转换成一行显示 */
      white-space: nowrap;
      /* 去除超出盒子的文本 */
      overflow: hidden;
      /* 省略超出盒子的文本 */
      text-overflow: ellipsis;
}

2.1 一行文本省略效果

2.1.1 强制转换成一行的效果

2.1.2 去除超出盒子的文本的效果

2.1.3 省略超出盒子的文本的效果

3. 多行省略文本

.box {
	width: 200px;
    height: 40px;
    border: 1px solid red;
    /* 去除超出盒子的文本 */
    overflow: hidden;
    /* 盒子居中显示 */
    margin: 100px auto;
    /* 转换成盒子模型 */
    display: -webkit-box;
    /* 设置盒子的内容布局方向（水平或者垂直） */
    -webkit-box-orient: vertical;
    /* 设置内容限制的行数（也就是在第几行省略） */
    -webkit-line-clamp: 2;
    /* 省略文本 */
    text-overflow: ellipsis;
}

3.1 多行文本省略效果

4. 注意

• 在多行文本省略中，其实下面还是有文本的，只是使用overflow：hidden将其隔掉
• 不使用overflow：hidden时的多行文本省略效果