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

用 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('') + '...'
}