css文本超过三行显示省略号，补充单行显示省略号

文章目录

• 一、使用步骤
• • 1.html部分
  • 2.css部分
• 二、额外补充，单行文本显示省略号
• 三、总结

一、使用步骤

1.html部分

代码如下（示例）：

<p class="ellipsis">这是一段很长的文本，可能会超过三行。这是一段很长的文本，可能会超过三行。这是一段很长的文本，可能会超过三行。这是一段很长的文本，可能会超过三行。</p>

2.css部分

代码如下（示例）：

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

二、额外补充，单行文本显示省略号

.ellipsis {
  white-space: nowrap; /* 强制文本在一行内显示 */  
  overflow: hidden; /* 隐藏溢出的文本 */  
  text-overflow: ellipsis; /* 用省略号表示被修剪的文本 */ 
}

三、总结

上述代码中，overflow: hidden;用于隐藏超出的文本内容；text-overflow: ellipsis;表示当文本溢出时显示省略号；display: -webkit-box;将对象作为弹性伸缩盒子模型显示；-webkit-line-clamp: 3;用于限制显示的文本行数为 3 行；-webkit-box-orient: vertical;设置盒子中内容竖直排列。需要注意的是，-webkit-line-clamp是一个非标准的 CSS 属性，它在 WebKit 内核的浏览器（如 Chrome、Safari 等）中得到较好的支持。对于其他浏览器，可能需要使用一些替代方法或考虑兼容性问题。