网页上动态块状内容如何实现两行文字省略并跟随？

如何在网页上实现两行文字省略并跟随动态块状内容

当网页上存在动态块状内容时，如何让上方两行文字在内容发生变化时自动省略并跟随动态内容，是一项常见的难题。

解决方案

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

参考文章

若需更多信息，可参考以下文章：

• [如何使用 css 和 javascript 实现文本省略](https://segmentfault.com/a/1190000040172089)

以上就是网页上动态块状内容如何实现两行文字省略并跟随？的详细内容，更多请关注其它相关文章！