两行文字省略并跟随动态块状内容（css/js）
在网页设计中，经常需要实现文字省略并跟随动态块状内容的功能。例如，当动态加载的图标占据不同长度的文案时，如何保持文本的适当展示状态？
CSS 方法
为了实现两行文字省略的效果，可以使用以下 CSS 规则：
p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
此规则将文本限制为两行，并使用省略号 (…) 表示超出的文本。然而，该方法仅适用于具有 WebKit 内核的浏览器（例如 Safari 和 Chrome）。
JavaScript 方法
为了获得更广泛的浏览器兼容性，可以使用 JavaScript 动态调整文本的高度：
function adjustTextHeight(element) { // 获取元素高度 var height = element.offsetHeight; // 设置最大高度为两行 element.style.maxHeight = "2em"; // 如果文本超出两行，则添加省略号 if (element.offsetHeight > height) { element.style.textOverflow = "ellipsis"; element.style.whiteSpace = "nowrap"; }}
此方法通过动态调整 maxHeight 和 textOverflow 属性来实现两行省略效果。
示例
结合 CSS 和 JavaScript，可以实现以下效果：
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas malesuada cursus risus, sit amet convallis neque pretium ut. Phasellus eros dolor, tempor sit amet risus quis, laoreet vehicula nunc. Nunc iaculis, nunc at ullamcorper vehicula, dolor metus ultricies quam, ut dignissim nulla eros at nunc. Donec scelerisque volutpat lacus, eget efficitur nibh egestas non. Suspendisse potenti.
adjustTextHeight(document.getElementById("text-ellipsis"));
此示例将对文本 text-ellipsis 应用两行省略效果，无论该文本的长度如何。
以上就是如何实现两行文字省略并跟随动态块状内容？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1559525.html
微信扫一扫 
支付宝扫一扫 
