[分享]css3单行省略多行省略

CSS3是Cascading Style Sheets的第三个版本，它是用来描述网页文档样式的一种语言。其中包含了许多有用的样式特性，例如单行省略和多行省略。 .singlelineellipsis ...

CSS3是Cascading Style Sheets的第三个版本，它是用来描述网页文档样式的一种语言。其中包含了许多有用的样式特性，例如单行省略和多行省略。

 .single-line-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .multi-line-ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
  } 

单行省略意味着文本内容只显示一行，并在末尾添加省略号。这适用于希望在不影响文档布局的情况下缩短文本内容的情况，例如在卡片上显示标题。

多行省略意味着文本内容可以显示多行，但是在一定高度范围内，只显示指定行数，超过则添加省略号。这适用于在列表或缩略图中显示文章摘要，并希望在有限空间内显示尽可能多的内容。

以上是CSS3单行省略和多行省略的代码示例，你可以根据需要进行修改并应用到你的网页文档中。