[分享]css单行多行文字截断

在前端开发中，为了美观和适应不同设备的尺寸，我们经常需要对文本进行截断。CSS提供了单行和多行文本截断的方法。.ellipsis { overflow: hidden; textoverflow: e...

在前端开发中，为了美观和适应不同设备的尺寸，我们经常需要对文本进行截断。CSS提供了单行和多行文本截断的方法。

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

上述代码实现的是单行文本截断，其中overflow: hidden;使溢出部分隐藏，text-overflow: ellipsis;表示溢出部分省略号代替，white-space: nowrap;表示不换行。

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /*指定行数*/
  -webkit-box-orient: vertical;
}

上述代码实现的是多行文字截断，其中display: -webkit-box;指定了弹性布局，-webkit-line-clamp: 2;指定了截断的行数，-webkit-box-orient: vertical;表示垂直排列。

需要注意的是，多行文本截断目前仅在webkit内核（Chrome、Safari）中适用，而在Firefox和IE中则无效。在Firefox和IE中可以使用JS实现多行截断。

以上是CSS实现单行和多行文本截断的方法，希望能对前端开发者有所帮助。