如何使用 CSS 和少量 JavaScript 实现两行文字省略以及动态块状内容跟随展示？

在网页上实现两行文字省略并跟随动态块状内容

如何使用 css 或少量 javascript 来实现如图所示的效果，即在不确定文案长度的情况下，对两行文字进行省略，并使动态块状内容跟随文字展示？

解决方案

使用 css

.ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

使用少量 javascript

const ellipsisElements = document.querySelectorAll('.ellipsis');
for (const element of ellipsisElements) {
  if (element.scrollHeight > element.offsetHeight) {
    element.classList.add('overflow');
  }
}

演示

https://codepen.io/xboxyan/pen/popwvnx

参考

• https://segmentfault.com/a/1190000040172089

以上就是如何使用 CSS 和少量 JavaScript 实现两行文字省略以及动态块状内容跟随展示？的详细内容，更多请关注硕下网其它相关文章！