如何在 CSS 中使用 Line Clamp 自定义省略号文本？-css教程-PHP中文网

如何在 CSS 中使用 Line Clamp 自定义省略号文本？

Susan Sarandon

发布： 2024-12-03 02:54:11

原创

939 人浏览过

How to Customize Ellipsis Text with Line Clamp in CSS?

带线夹的自定义省略号文本

问题：

在指示时隐藏超过两行的文本部分带有自定义文本的隐藏溢出，例如“...123 T."

解决方案：

将来，line-clamp 属性将提供一种方便的单行解决方案：

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

登录后复制

Hacky 替代方案（适用于当前浏览器）：

直到line-clamp 属性得到广泛支持，一个 hacky 解决方法涉及以下 CSS 和 HTML：

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>

登录后复制

注意：此解决方法涉及创建一个隐藏的span 来替换省略号，并使用大框阴影来隐藏后面的文本。这不是一个理想的解决方案，但提供了一个临时修复方案，直到 line-clamp 被广泛采用。

以上是如何在 CSS 中使用 Line Clamp 自定义省略号文本？的详细内容。更多信息请关注PHP中文网其他相关文章！