CSS多余文字显示省略号详解

CSS多余文字显示省略号是Web开发中一个常见的问题，它可以通过CSS的text-overflow属性来实现。本文将从多个方面对CSS多余文字显示省略号做详细的阐述。

一、CSS多余文字不显示省略号

当文本内容超出容器的宽度时，如果不设置text-overflow属性，文本会自动变为换行显示，而不会显示省略号。例如：

.container {
  width: 200px;
  height: 50px;
  overflow: hidden;
  border: 1px solid #ccc;
}
.text {
  width: 300px;
  height: 100px;
  font-size: 16px;
  line-height: 1.5;
}

这时在HTML中添加如下代码：

<div class="container">
  <div class="text">
    如果文本内容超出容器的宽度时，如果不设置text-overflow属性，文本会自动变为换行显示，而不会显示省略号。
  </div>
</div>

结果如下：

<div class="container"> <div class="text"> 如果文本内容超出容器的宽度时，如果不设置text-overflow属性，文本会自动变为换行显示，而不会显示省略号。 </div> </div> ## 二、CSS多余文字显示省略号和展开显示有时我们需要文本过长时既显示省略号，又能点击展开全文，这时候可以通过添加伪类和JavaScript来实现。例如： ```css .container { width: 200px; overflow: hidden; position: relative; } .text { width: 300px; height: 100px; font-size: 16px; line-height: 1.5; } .text::after { content: "..."; position: absolute; bottom: 0; right: 0; padding-right: 20px; background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%); } .btn { position: absolute; bottom: 0; right: 0; padding: 0 10px; font-size: 14px; color: #f00; background: #fff; cursor: pointer; } ``` 这时在HTML中添加如下代码： ```html <div class="container"> <div class="text"> 有时我们需要文本过长时既显示省略号，又能点击展开全文，这时候可以通过添加伪类和JavaScript来实现。 </div> <div class="btn">展开全文</div> </div> ``` 结果如下： <div class="container"> <div class="text"> 有时我们需要文本过长时既显示省略号，又能点击展开全文，这时候可以通过添加伪类和JavaScript来实现。 </div> <div class="btn">展开全文</div> </div> ## 三、CSS多余文字显示省略号六个点除了三个点的省略号，还可以使用六个点的省略号，只需要设置`text-overflow`为`ellipsis`和2个Unicode字符即可。例如： ```css .container { width: 200px; height: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ``` 这时在HTML中添加如下代码： ```html <div class="container" title="如果文本内容超出容器的宽度时，6个点的省略号有时更加美观"> 如果文本内容超出容器的宽度时，6个点的省略号有时更加美观 </div> ``` 结果如下： <div class="container" title="如果文本内容超出容器的宽度时，6个点的省略号有时更加美观"> 如果文本内容超出容器的宽度时，6个点的省略号有时更加美观 </div> ## 四、CSS文字溢出显示省略号有时我们需要将一些特定字符之后的文本显示省略号，这时候可以使用CSS的`::first-line`和`::after`相结合的伪类来实现。例如： ```css .container { width: 200px; overflow: hidden; } .text::first-line { font-weight: bold; } .text::after { content: "..."; font-weight: normal; } .text.overflow { white-space: nowrap; text-overflow: ellipsis; } ``` 这时在HTML中添加如下代码： ```html <div class="container"> <div class="text">前缀：CSS多余文字显示省略号后面几个字删掉</div> <div class="text overflow">前缀：CSS多余文字显示省略号后面几个字删掉</div> </div> ``` 结果如下： <div class="container"> <div class="text"> 前缀：<span>CSS多余文字显示省略号后面几个字删掉</span> </div> <div class="text overflow"> 前缀：<span>CSS多余文字显示省略号后面几个字删掉</span> </div> </div> ## 五、CSS文字不显示省略号有时我们需要将一些特定字符之后的文本不显示省略号，这时候可以使用`white-space`和`overflow`属性来实现。例如： ```css .container { width: 200px; overflow: hidden; white-space: nowrap; } .text { width: 300px; height: 100px; font-size: 16px; line-height: 1.5; } ``` 这时在HTML中添加如下代码： ```html <div class="container"> <div class="text">前缀：CSS多余文字不显示省略号并且不换行显示</div> </div> ``` 结果如下： <div class="container"> <div class="text"> 前缀：<span>CSS多余文字不显示省略号并且不换行显示</span> </div> </div> ## 六、CSS超出文字显示省略号有时我们需要将容器宽度固定，但文字长度随内容变化，这时候可以使用`inline-block`和`text-overflow`来实现。例如： ```css .container { width: 200px; height: 50px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border: 1px solid #ccc; } .text { display: inline-block; vertical-align: bottom; font-size: 16px; line-height: 1.5; } ``` 这时在HTML中添加如下代码： ```html <div class="container"> <div class="text">CSS超出文字显示省略号</div> </div> ``` 结果如下： <div class="container"> <div class="text"> CSS超出文字显示省略号 </div> </div> ## 七、CSS溢出文字显示省略号有时我们需要将容器高度固定，但文字长度随内容变化，这时候可以使用两个容器和`text-overflow`来实现。例如： ```css .container { width: 200px; height: 50px; overflow: hidden; border: 1px solid #ccc; } .text { width: 300px; font-size: 16px; line-height: 1.5; } .overflow { position: absolute; top: 0; left: 0; width: 100%; height: 50px; overflow: hidden; } .overflow::after { content: "..."; position: absolute; bottom: 0; right: 0; padding-right: 20px; background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%); } ``` 这时在HTML中添加如下代码： ```html <div class="container"> <div class="overflow"> <div class="text">CSS溢出文字显示省略号：有时候我们需要将容器高度固定，但文字长度随内容变化</div> </div> </div> ``` 结果如下： <div class="container"> <div class="overflow"> <div class="text"> CSS溢出文字显示省略号：有时候我们需要将容器高度固定，但文字长度随内容变化 </div> </div> </div> ## 八、CSS多行文字显示省略号有时我们需要将多行文字显示省略号，这时候可以使用WebKit和CSS的`-webkit-line-clamp`属性来实现。例如： ```css .container { width: 200px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .text { width: 300px; height: 100px; font-size: 16px; line-height: 1.5; } ``` 这时在HTML中添加如下代码： ```html <div class="container"> <div class="text">CSS多行文字显示省略号：有时候我们需要将多行文字显示省略号，这时候可以使用WebKit和CSS的-webkit-line-clamp属性来实现。</div> </div> ``` 结果如下： <div class="container"> <div class="text"> CSS多行文字显示省略号：有时候我们需要将多行文字显示省略号，这时候可以使用WebKit和CSS的-webkit-line-clamp属性来实现。 </div> </div> ## 九、CSS微信文字显示省略号和展开微信中文字显示省略号和展开比较特殊，需要在末尾添加一个类似于“阅读全文”的链接。例如： ```css .container { width: 200px; overflow: hidden; position: relative; } .text { width: 300px; height: 100px; font-size: 16px; line-height: 1.5; } .arrow { position: absolute; bottom: 0; right: 0; padding: 0 10px; font-size: 14px; color: #f00; background: #fff; cursor: pointer; } ``` 这时在HTML中添加如下代码： ```html <div class="container"> <div class="text">CSS微信文字显示省略号和展开：微信中文字显示省略号和展开比较特殊，需要在末尾添加一个类似于“阅读全文”的链接。</div> <div class="arrow">阅读全文</div> </div> ``` 结果如下： <div class="container"> <div class="text"> CSS微信文字显示省略号和展开：微信中文字显示省略号和展开比较特殊，需要在末尾添加一个类似于“阅读全文”的链接。 </div> <div class="arrow">阅读全文</div> </div> ## 十、CSS表格怎么设置文字显示省略号在表格中，如果某一单元格的文本内容过长，可以使用CSS的`text-overflow`属性来实现。例如： ```css .table { border-collapse: collapse; width: 100%; } .table td { border: 1px solid #ccc; padding: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; } ``` 这时在HTML中添加如下代码： ```html <table class="table"> <tbody> <tr> <td>一段过长的文本内容一段过</td> </tr> </tbody> </table> ``` 结果如下： <table class="table"> <tbody> <tr> <td>一段过长的文本内容一段过</td> </tr> </tbody> </table>