CSS 文本省略号与“更多”链接的妙用，如何优雅展示更多文本？

2024-03-21 23:14:30

CSS 文本省略号与“更多”链接的实现

问题概述

当需要在有限的空间内展示文本时，CSS 的 text-overflow: ellipsis 属性可用于在文本末尾添加省略号 (...)。然而，当文本长度超出容器时，需要一种方法来显示更多文本。

解决方案

为了在省略文本中包含“更多”链接，我们需要对 CSS 和 HTML 进行一些调整：

CSS：

.text {
  display: inline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-height: 24px; /* fallback */
  max-height: 48px; /* fallback */
  -webkit-line-clamp: 2; /* 显示的行数 */
  -webkit-box-orient: vertical;
}

.text a {
  position: absolute;
  bottom: 0;
  right: 0;
  text-decoration: none;
  color: blue;
}

HTML：

<div class="text">
  <div>Lorem ipsum dolor sit amet, Lorem Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem Lorem i</div>
  <a href="#">更多</a>
</div>

这些修改将“更多”链接绝对定位在省略文本的右下角。

工作原理

当文本超出容器时，text-overflow: ellipsis 会在末尾添加省略号。display: -webkit-box 将文本划分为一个块容器，-webkit-line-clamp 限制显示的行数。position: absolute 将“更多”链接绝对定位在省略文本之上。

注意事项

浏览器兼容性： -webkit-line-clamp 仅适用于 Webkit 浏览器（如 Chrome 和 Safari）。对于其他浏览器，可以使用 JavaScript 解决方案。
响应性： 随着屏幕尺寸的变化，省略文本的行数可能会发生变化。确保“更多”链接的位置仍然保持在省略文本的右下角。