CSS超出两行显示省略号

一、CSS超出显示省略号

当文本长度超过所在容器的宽度时，CSS提供了文本溢出隐藏属性来避免文本溢出容器。通过text-overflow属性来设置文本显示方式为省略号，具体有三个值：

<style>
  .example1 {
    width: 200px;
    white-space: nowrap; /* 控制文本不换行 */ 
    overflow: hidden; 
    text-overflow: ellipsis; /* 当文本溢出时，显示为省略号 */
  }
</style>
<p class="example1">This is a very long text. This is a very long text. This is a very long text.</p> 

上面代码中，当容器的宽度为200px时，如果文本长度超出该宽度，就会显示为省略号。

二、CSS超出部分显示省略号

如果要控制省略号的位置，可以通过max-lines属性来控制文本的行数。先设置下面的代码并注释相应部分：

<style>
  .example2 {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
    -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
  }
  /* .example2::after {
    content: "...";
  } */
  .example2.overflow {
    -webkit-line-clamp: 2; /* 显示几行文本 */
  }
</style>

接着在<p>标签中添加.overflow类：

<p class="example2 overflow">This is a very long text. This is a very long text. This is a very long text. This is a very long text. This is a very long text. This is a very long text.</p> 

上面的代码中，设置了两行文本显示，当文本长度超过两行时，就会显示为省略号。如果想要省略号在文本后面显示，只需要取消代码注释。

三、CSS超过三行展示省略号

如果要控制大于三行时才显示省略号，需要设置-webkit-line-clamp属性的值大于需要的行数。下面是相应的代码：

<style>
  .example3 {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
  .example3::after {
    content: "..."; /* 省略号 */
  }
  .example3.overflow {
    -webkit-line-clamp: 4; /* 显示几行文本 */
  }
</style>

在<p>标签中添加.overflow类：

<p class="example3 overflow">This is a very long text. This is a very long text. This is a very long text. This is a very long text. This is a very long text. This is a very long text. This is a very long text. This is a very long text. This is a very long text. This is a very long text.</p>

四、CSS两行省略号

如果只想让两行文本显示省略号，可以使用max-height属性来实现，max-height的值是<line-height> * 2，其中line-height是文本所在容器的行高。下面是相应的代码：

<style>
  .example4 {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    max-height: 2.4em; /* 行高是1.2em，2行的高度就是2.4em */
    text-overflow: ellipsis;
  }
</style>
<p class="example4">This is a very long text. This is a very long text. This is a very long text. This is a very long text. This is a very long text. This is a very long text. This is a very long text. This is a very long text. This is a very long text. This is a very long text.</p>

上面的代码中，设置了2.4em的最大高度，同时采用了text-overflow属性来实现省略号。