如何通过css设置文本溢出省略号text-overflow_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何通过css设置文本溢出省略号text-overflow

2025-10-19

浏览次数：次

返回列表

单行文本溢出省略需设置overflow: hidden、white-space: nowrap和text-overflow: ellipsis，并限定宽度；多行则用display: -webkit-box、-webkit-line-clamp和-webkit-box-orient: vertical，同样需隐藏溢出，适用于WebKit浏览器，注意兼容性及容器宽度限制。

如何通过css设置文本溢出省略号text-overflow

当文本内容超出容器宽度时，可以通过 CSS 设置显示省略号（...）来优雅地处理溢出。实现这一效果需要结合多个 CSS 属性，确保文本在单行或多行情况下都能正确截断并显示省略号。

单行文本溢出省略号

适用于只显示一行文本，超出部分用省略号表示。

关键属性：

overflow: hidden：隐藏溢出内容
white-space: nowrap：禁止文本换行
text-overflow: ellipsis：溢出时显示省略号

示例代码：

.single-line {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 200px;        /* 必须有固定或最大宽度 */
  border: 1px solid #ccc;
}

多行文本溢出省略号

用于限制文本显示为两行或更多行，超出后自动加省略号。

常用方法（基于 WebKit 内核浏览器）：

display: -webkit-box：启用弹性盒子模型
-webkit-line-clamp：限制行数
-webkit-box-orient: vertical：设置子元素垂直排列
同样需要 overflow: hidden

示例代码（两行省略）：

AI Surge Cloud

低代码数据分析平台，帮助企业快速交付深度数据

87 查看详情 AI Surge Cloud

.multi-line {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 200px;
  border: 1px solid #ddd;
}

注意：该方式在非 WebKit 浏览器中可能不完全支持，需测试兼容性或使用 J*aScript 替代方案。