首页 > 文章列表 > 如何使用 CSS 和少量 JavaScript 实现两行文字省略以及动态块状内容跟随展示?

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

439 2024-11-12

如何使用 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
来源:1731248312