用 css 或 js 实现多行文本溢出省略效果

本文由清尘发表于2019-02-25 14:37最后修改于2020-07-28属于HTML/CSS分类

用 css 或 js 实现多行文本溢出省略效果

CSS版:

<div class="test">
  如何用 css 或 js 实现多行文本溢出省略效果,考虑兼容性
</div>
.test{
  width: 100px;
  height: 46px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:2
  }

js版:

<div class="test" id="test">
  如何用 css 或 js 实现多行文本溢出省略效果,考虑兼容性
</div>
.test{
  width: 100px;
  overflow: hidden;
  position: relative;
  line-height: 20px;
  max-height: 40px;
  }
const p = document.querySelector('#test')
let words = p.innerHTML.split(/(?<=[\u4e00-\u9fa5])|(?<=\w*?\b)/g)
while (p.scrollHeight > p.clientHeight) {
  words.pop()
  p.innerHTML = words.join('') + '...'
}