css 几行内隐藏多余文字

在网页设计中，经常需要处理一些文本截断的问题，特别是在列表、摘要等布局中，有时候需要隐藏多余的文字，只显示一部分，以达到更好的视觉效果。对于这种情况，可以使用 CSS 中的 text-overflow 属性来实现。

下面是一个简单使用 text-overflow 属性的示例，假设我们有一段较长的文本：

 p class="text">
    这是一段较长的文本，用来演示文本截断的情况。/p>
 

我们想要将这段文本截断，只显示前面部分文本，后面用省略号表示。可以使用以下 CSS：

 .text {
         overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
  }
    

在上述 CSS 的样式中，overflow: hidden; 用来隐藏超出元素框的部分；white-space: nowrap; 用来防止文本换行；text-overflow: ellipsis; 则是关键，它能让多余的文本显示成省略号（...）。

如果你希望定制省略号的形状，可以用 text-overflow 属性的另一个值 string。例如，我们可以将省略号改为三个竖线，代码如下：

 .text {
         overflow: hidden;
           white-space: nowrap;
           text-overflow: "|||";
  }
    

使用 CSS 的 text-overflow 属性可以实现简单快捷的文本截断效果，但需要注意的是该属性只能应用于单行文本，对于多行文本需要其他方案解决。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！