如何在 CSS 中为多行文本添加省略号?

cssweb developmentfront end technology更新于 2024/7/25 15:08:17

CSS 没有为多行文本添加省略号的属性，但我们仍然可以实现所需的效果。不过，我们先来看看如何在单行文本中添加省略号。

为单行文本添加省略号

要添加省略号，我们需要使用 text-overflow 属性，并将值设置为 ellipsis，即 -

text-overflow: ellipsis;

示例

现在让我们看看完整的例子 -

<!DOCTYPE html>
<html>
<head>
   <style> 
      div.b {
         white-space: nowrap; 
         width: 80px; 
         overflow: hidden;
         text-overflow: ellipsis; 
         border: 2px solid blue;
      }
   </style>
</head>
<body>
   <h1>Demo Heading</h1>
   <div class="b">This is a demo text</div>
</body>
</html>

输出

将省略号添加到多行文本

要将省略号添加到多行文本，首先使用以下 CSS 属性设置 div。此处设置的高度适用于整个段落。溢出部分被隐藏，以避免在段落指定高度之后出现任何溢出 -

.mydiv {
   position: relative;
   display: block;
   width: 28em;
   height: calc(2em + 5px);
   overflow: hidden;
   white-space: normal;
}

然后，使用 word-break 属性设置 span mytext。word-break 属性规定了单词到达行尾时应如何断行。max-height 也已设置 -

.mytext {
   word-break: break-all;
   position: relative;
   display: block;
   max-height: 3em;
}

最后，使用 right 和 top CSS 属性设置省略号属性 -

.myelli {
   position: absolute;
   right: 0;
   top: calc(4em + 2px - 100%);
   text-align: left;
   background: white;
}

示例

现在让我们看看完整的例子 -

<!DOCTYPE html>
<html>
<head>
   <style> 
      .mydiv {
         position: relative;
         display: block;
         width: 28em;
         height: calc(2em + 5px);
         overflow: hidden;
         white-space: normal;
      }
      .mytext {
         word-break: break-all;
         position: relative;
         display: block;
         max-height: 3em;
      }
      .myelli {
         position: absolute;
         right: 0;
         top: calc(4em + 2px - 100%);
         text-align: left;
         background: white;
      }
   </style>
</head>
<body>
   <h1>Implementing Multiline Ellipsis</h1>
   <div class="mydiv">
      <span class="mytext">
         Aliquam erat volutpat. Vestibulum at nulla mollis, tristique odio in, 
         lobortis libero. Nulla in viverra sem. Sed sed cursus justo, ac sodales nisl. 
         Pellentesque posuere metus egestas arcu accumsan aliquet. Donec ac dui eu nibh 
         euismod sodales sit amet sed libero. Ut id vehicula eros. Nam fringilla lectus 
         tincidunt, efficitur metus a, vestibulum tortor. Proin tincidunt dui vel dui maximus 
         tincidunt. Quisque quis tortor tellus. Sed molestie, quam convallis sodales maximus, 
         nunc justo volutpat quam, consequat fermentum dolor ipsum non massa.
         <div class="myelli">...</div>
      </span>
   </div>
</body>
</html>