如何使用省略号截断文本并附加'123 T.”在下一行？-css教程-PHP中文网

如何使用省略号截断文本并附加'123 T.”在下一行？

Patricia Arquette

发布： 2024-12-04 01:24:11

原创

207 人浏览过

How Can I Truncate Text with an Ellipsis and Append

将文本放在与第二行文本溢出省略号内联的点之后

问题

要压缩过长的文本，您打算隐藏文本的一部分，同时指示溢出“...123T。”在其后续行上，如下图所示：

[用省略号和“123 T.”截断的文本图像]

解决方案

在不久的将来，一行带有“line-clamp: 2 "...123 T.;”的代码将规范中提供了更多信息。

免责声明

在此功能广泛可用之前，这里有一个粗略的解决方法来实现所需的功能结果：

CSS

.container {
  max-width: 200px;
  margin: 5px;
}

.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="container">
  <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>
</div>

<div class="container">
  <div class="main-text">Lorem ipsum <span></span></div>
</div>

<div class="container">
  <div class="main-text">Lo <span></span></div>
</div>

<div class="container">
  <div class="main-text">
    Lorem ipsum dolor sit ameta, adipiscing elit. Nam metus <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lorem ipsum dolor sit ameta, adipiscing elit <span></span>
  </div>
</div>

登录后复制

以上是如何使用省略号截断文本并附加'123 T.”在下一行？的详细内容。更多信息请关注PHP中文网其他相关文章！