纯CSS实现:"当字符内容超过一定长度后自动隐藏，并以...结尾"

8哥爱前端

在 CSS 中，可以通过以下属性设置，使内容超过一定字符长度后自动隐藏，并以省略号（...）结尾。这种方法适用于单行文本或块级元素中的多行文本。



单行文本的处理CSS 代码

1. .text-ellipsis {
   
2.     white-space: nowrap;       /* 防止文本换行 */
   
3.     overflow: hidden;          /* 隐藏超出部分 */
   
4.     text-overflow: ellipsis;   /* 使用省略号表示隐藏部分 */
   
5.     max-width: 200px;          /* 设置最大宽度，可根据需要调整 */
   
6. }

复制代码

HTML 示例

1. <div class="text-ellipsis">
   
2.     这是一段非常长的文字，当它超出指定宽度时，会自动隐藏并显示省略号。
   
3. </div>

复制代码

效果

• 如果文本长度超过 max-width 的限制，超出部分会被隐藏，并用 ... 表示。
  

多行文本的处理

对于多行文本，可以使用 -webkit-line-clamp 属性来实现类似的效果。

CSS 代码

1. .text-multi-ellipsis {
   
2.     display: -webkit-box;              /* 将对象作为弹性伸缩盒子模型显示 */
   
3.     -webkit-box-orient: vertical;      /* 设置或检索伸缩盒对象的子元素的排列方式（垂直排列） */
   
4.     -webkit-line-clamp: 3;             /* 控制显示的行数（例如：3 行） */
   
5.     overflow: hidden;                  /* 隐藏超出部分 */
   
6.     text-overflow: ellipsis;           /* 使用省略号表示隐藏部分 */
   
7.     max-height: 60px;                  /* 根据字体大小和行高调整高度 */
   
8.     line-height: 20px;                 /* 设置行高 */
   
9.     font-size: 14px;                   /* 设置字体大小 */
   
10. }

复制代码

HTML 示例

1. <div class="text-multi-ellipsis">
   
2.     这是一段非常长的文字，当它超出指定行数时，会自动隐藏并显示省略号。这是一段非常长的文字，当它超出指定行数时，会自动隐藏并显示省略号。
   
3. </div>

复制代码

效果

• 文本会根据 -webkit-line-clamp 的值控制显示的行数，超出部分会被隐藏，并用 ... 表示。
  

注意事项

• 浏览器兼容性：
  
  
  • 单行文本的处理方法 (white-space: nowrap) 在所有现代浏览器中都支持。
  • 多行文本的处理方法 (-webkit-line-clamp) 是基于 WebKit 的属性，主要适用于 Chrome、Safari 和 Edge 等浏览器。如果需要兼容 Firefox 或其他非 WebKit 浏览器，可能需要使用 JavaScript 实现。
    
• 动态计算高度：
  
  
  • 对于多行文本，max-height 应该与 line-height 和 -webkit-line-clamp 的值相匹配。例如，如果每行高度为 20px，显示 3 行，则 max-height 应设置为 60px。
    
• 替代方案：
  
  
  • 如果需要更高的兼容性，可以使用 JavaScript 动态截取文本内容，并手动添加省略号。
    
  
  

---

总结

• 单行文本：使用 white-space: nowrap、overflow: hidden 和 text-overflow: ellipsis。
• 多行文本：使用 -webkit-line-clamp 和相关属性。
• 根据需求选择合适的方案，并注意浏览器兼容性问题。