在网页上实现两行文字省略并跟随动态块状内容
如何使用 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
参考