CSS 如何将省略号应用到多行文本

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 如何将省略号应用到多行文本

将省略号应用于多行文本

要允许多行文本出现省略号，首先使用以下CSS属性设置div。这里设置的高度适用于整个段落。overflow被隐藏以避免超出段落指定的高度后产生的任何溢出。

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

然后，span元素的mytext属性会被设置成word-break属性。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>