在网页上实现两行文字省略并跟随动态块状内容
如何使用 css 或少量 javascript 来实现如图所示的效果，即在不确定文案长度的情况下，对两行文字进行省略，并使动态块状内容跟随文字展示？
解决方案
使用 css
立即学习“Java免费学习笔记（深入）”；
.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
