用 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('') + '...'
}
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。