CSS多行文本溢出显示省略号

PWHOW • 2025-04-20 13:09 • 编程

一、基本概念

CSS多行文本溢出显示省略号是一种常见的页面排版技巧，通过设置CSS样式，使元素内的文本内容超出指定的宽度或高度时，自动显示省略号，从而提升页面的可读性和美观性。实现多行文本省略的方式有多种，但通常需要结合CSS的display、overflow、text-overflow、white-space、line-height等属性来实现。

二、基本实现方式

实现多行文本溢出显示省略号的方式有很多，但其中比较基础的方式是使用CSS的text-overflow属性和white-space属性。

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

1. text-overflow属性

text-overflow属性可以控制溢出文本如何显示。在多行文本溢出时，配合white-space属性使用可以使省略号显示在文本中间或最后。

2. white-space属性

white-space属性用来控制元素内部文本的换行和空格处理方式。当white-space属性设置为nowrap时，表示文本不允许换行；设置为normal时，表示文本可以自动换行。

3. -webkit-box属性

-webkit-box是一种CSS3属性，用来实现文本的多行显示，-webkit-box-orient属性用来设置文本的方向（水平或垂直），-webkit-line-clamp属性用来设置行数。

三、高级实现方式

除了基本实现方式外，还可以结合其他属性，实现更高级的多行文本溢出显示省略号的效果。

1. line-clamp属性

line-clamp属性是CSS3的一个实验性属性，它可以直接控制元素内文本的行数。此属性需要与display：-webkit-box属性结合使用。

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

2. calc()函数

calc()函数是CSS3中的一个计算属性，可以用来计算长度值。在多行文本省略的实现中，可以在父元素上设置max-height属性，并在子元素（文本元素）中设置height属性，通过calc()函数计算文本元素的高度。从而实现多行文本省略的效果。

  
    .overflow-text {
      display: block;
      max-height: calc(2em * 3);
      overflow: hidden;
      text-overflow: ellipsis;
    }

3. 纯CSS实现

在一些浏览器中，上述方法不一定都能实现多行文本溢出显示省略号的效果，因此可以使用一些CSS技巧来实现。例如，使用伪元素实现文本的追加并设置透明度渐变，使文本随着行数自动消失，从而实现多行文本省略的效果。

  
    .overflow-text {
      overflow: hidden;
      position: relative;
      line-height: 1.5em;
      max-height: 4.5em;
      text-align: justify;
    }
    .overflow-text:before{
      float:left;
      content:"...";
      position:absolute;
      bottom:0;
      right:0;
      margin-right: -1.5em;
      padding:0 1.5em;
      background: white;
      color: #000;
      text-align:right;
      width: 100%;
      z-index: 1;
    }
    .overflow-text:after{
      content:"";
      position:absolute;
      bottom:0;
      right:0;
      width:1.5em;
      height:1.5em;
      margin-right: -1.5em;
      background: white;
      z-index: 2;
    }

四、总结

通过上述介绍，我们了解了多种实现多行文本溢出显示省略号的方式，基本实现方式是通过text-overflow属性和white-space属性；高级实现方式包括line-clamp属性、calc()函数和纯CSS实现。在使用这些技术时，需要结合具体情况灵活使用，并根据浏览器兼容性进行适当的调整。

原创文章，作者：PWHOW，如若转载，请注明出处：https://www.506064.com/n/370267.html