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

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《如何使用 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 实现两行文字省略以及动态块状内容跟随展示？》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！