如何在网页上实现两行文字省略并跟随动态块状内容
当网页上存在动态块状内容时，如何让上方两行文字在内容发生变化时自动省略并跟随动态内容，是一项常见的难题。
解决方案
css方法：
/* 父元素 */
.container {
display: flex;
align-items: center;
}
/* 左侧内容 */
.content {
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* 右侧块状内容 */
.block {
margin-left: auto;
}javascript方法：
function truncateText(element, maxLength) {
// 获取元素的内容
const text = element.textContent;
// 超过最大长度，截断文本并添加省略号
if (text.length > maxLength) {
element.textContent = text.substring(0, maxLength) + '...';
}
}
// 对需要省略文本的元素进行遍历
const elements = document.querySelectorAll('.content');
elements.forEach((element) => {
truncateText(element, 20); // 设置最大长度为20个字符
});演示
参见下方codepen示例：
https://codepen.io/xboxyan/pen/popwvnx
参考文章
若需更多信息，可参考以下文章：
以上就是网页上动态块状内容如何实现两行文字省略并跟随？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
697
收藏
