[分享]css两行截取字符串

在前端开发中，经常会遇到需要截取字符串的场景。CSS是前端开发中常用的样式语言之一，利用CSS实现字符串截取就非常简单了。下面介绍两种CSS方法实现字符串截取：p { textoverflow: el...

在前端开发中，经常会遇到需要截取字符串的场景。CSS是前端开发中常用的样式语言之一，利用CSS实现字符串截取就非常简单了。下面介绍两种CSS方法实现字符串截取：

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

上面这段CSS代码的意思是：

• text-overflow:ellipsis;表示超出宽度的部分用“…”代替
• white-space:nowrap;表示不换行
• overflow:hidden;表示溢出隐藏

这样，当字符串长度超过所在容器的宽度时，就会显示为“...”，如下所示：

<div style="width:100px; height:30px; overflow:hidden;">
  <p style="text-overflow:ellipsis;white-space:nowrap;">
    This is a very long text.
  </p>
</div>

上述代码的效果如图所示：

p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

上面这段代码的意思是：

• display: -webkit-box;表示使用CSS盒装布局
• -webkit-box-orient: vertical;表示在垂直方向排列
• -webkit-line-clamp: 2;表示只显示两行
• overflow:hidden;表示溢出隐藏

这样，当文本长度超过两行时，就会截取并隐藏超出部分，如下所示：

<div style="width:100px; height:45px; overflow:hidden;">
  <p style="display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;">
    This is a very long text.
  </p>
</div>

上述代码的效果如图所示：