如何使用 CSS 中的自定义指示器隐藏文本溢出？

使用指示器隐藏文本溢出

要压缩超过两行的文本并指示隐藏内容，可以实施自定义解决方案，直到line-clamp 属性的未来实现。

自定义解决方案

1. 设置文本容器的行高和最大高度，将其显示限制为两行。
2. 使用overflow:hidden属性隐藏溢出的文本。
3. 创建阴影效果以遮挡省略号会显示的文本。
4. 放置一个跨度使用绝对定位在容器右下角具有所需指示符文本的元素。
5. 将省略号添加到 span 元素的开头，并将指示符文本添加到其

CSS

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

.main-text:after {
  content: "123 T.";
  display:inline-block;
  width:40px;
  position:relative;
  z-index:999;
  box-shadow:
    40px 0 0 #fff,
    80px 0 0 #fff,
    120px 0 0 #fff,
    160px 0 0 #fff;
  color: #8e8f8f;
  font-size: 10px;
  background: #fff;
  margin-left:2px;
}

.main-text span {
  position: absolute;
  top: 1.2em;
  right: 0;
  padding: 0 3px;
  background: #fff;
}

.main-text span:before {
  content: "...";
}

.main-text span:after {
  content: "123 T.";
  color: #8e8f8f;
  font-size: 10px;
}

HTML

<div class="main-text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus mi, dapibus sit amet posuere eu, porttitor condimentum nulla. Donec convallis lorem justo, eget malesuada lorem tempor vitae. Aliquam sollicitudin lacus ipsum, at tincidunt ante condimentum
  vitae. <span></span>
</div>

此解决方案隐藏溢出文本并显示两行后的指定指示符。

以上是如何使用 CSS 中的自定义指示器隐藏文本溢出？的详细内容。更多信息请关注PHP中文网其他相关文章！