文本省略号

发表于 更新于 本文字数： 758 阅读时长 ≈ 1 分钟

单行文本溢出省略

HTML

<p>我是一行很长很长的文字，我是一行很长很长的文字</p>

CSS

p{
  width: 300px;
  height: 150px;
  border: 1px dashed;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

view

多行文本溢出

1.使用css实现

现行CSS中暂无统一实现该样式的属性

但针对于webkit内核的浏览器，可以采用下面的方式实现该样式

HTML

<p>我是一段很长很长的多行文本，我是一段很长很长的多行文本，我是一段很长很长的多行文本，我是一段很长很长的多行文本，我是一段很长很长的多行文本</p>

CSS

p{
  width: 300px;
  border: 1px dashed;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

view

2.使用js实现

使用 Clamp.js

HTML

<p>我是一段很长很长的多行文本，我是一段很长很长的多行文本，我是一段很长很长的多行文本，我是一段很长很长的多行文本，我是一段很长很长的多行文本</p>

CSS

p{
  width: 300px;
  border: 1px dashed;
  overflow: hidden;
}

JS

let el = document.getElementsByTagName('p')[0]

$clamp(el, {clamp: 2})

view

参考内容: