如何隐藏两行后的文本并显示溢出指示器，例如'...123 T.”？

使用第二行溢出指示器隐藏点后的文本

显示空间有限的文本时，通常需要截断并指示溢出。此问题解决了隐藏超过两行的文本并添加“...123 T”的挑战。以第二行作为指示符。

当前实现

提供的代码最初解决了这个问题：

<div class="container">
  <span class="main-text">
    Long text that exceeds two lines.
  </span>
  <span class="small-text">123 T.</span>
</div>

.main-text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

虽然这个方法将多余的文本隐藏在两行内，它不跨浏览器兼容，可能无法完全满足所需

未来的解决方案

规范提出了一个简写属性，line-clamp，它可以将这个任务简化为一行：

line-clamp: 2 "...123 T.";

此属性允许创建带有溢出的视觉截断文本

Hacky 替代方案

在 line-clamp 属性得到广泛支持之前，可以使用 CSS hack 来实现解决方法：

.main-text {
  line-height: 1.2em;
  max-height: calc(2 * 1.2em);
  overflow: hidden;
  position: relative;
}

<div class="main-text">
  Lorem ipsum ...<span>123 T.</span>
</div>

在此方法中，带有隐藏点和“123 T”的跨度元素。文本位于容器的右下角。一个大的盒子阴影用于隐藏视图中的点，仅显示省略号。

以上是如何隐藏两行后的文本并显示溢出指示器，例如'...123 T.”？的详细内容。更多信息请关注PHP中文网其他相关文章！