如何实现两行文字省略并跟随动态块状内容？-html教程-PHP中文网

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

心靈之曲

发布： 2024-11-13 08:48:18

原创

982人浏览过

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

两行文字省略并跟随动态块状内容（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 动态调整文本的高度：

Flawless AI

好莱坞2.0，电影制作领域的生成式AI工具

查看详情

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，可以实现以下效果：

<p id="text-ellipsis">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.</p>

<script>
  adjustTextHeight(document.getElementById("text-ellipsis"));
</script>

登录后复制

此示例将对文本 text-ellipsis 应用两行省略效果，无论该文本的长度如何。

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