如何在CSS中设置文本溢出处理_text-overflow隐藏超出内容-css教程-PHP中文网

如何在CSS中设置文本溢出处理_text-overflow隐藏超出内容

P粉602998670

发布： 2025-11-27 19:27:22

原创

578人浏览过

单行文本溢出需设置white-space:nowrap、overflow:hidden和text-overflow:ellipsis；多行则用-webkit-box和-webkit-line-clamp限制行数并加省略号；仅隐藏溢出内容可只设overflow:hidden。

如何在css中设置文本溢出处理_text-overflow隐藏超出内容

当文本内容超出容器宽度时，可以通过CSS的 text-overflow 属性来控制如何显示溢出部分。常见做法是将超出的内容隐藏并用省略号（...）表示。要实现这一效果，需要结合几个关键属性一起使用。

1. 单行文本溢出隐藏加省略号

适用于只显示一行文本，超出部分以省略号结尾：

注意：必须配合 overflow: hidden 和 white-space: nowrap 才能生效。

text-overflow: ellipsis; 表示超出部分用省略号代替。

.text-ellipsis {
  white-space: nowrap;        /* 禁止换行 */
  overflow: hidden;           /* 超出部分隐藏 */
  text-overflow: ellipsis;    /* 显示省略号 */
  width: 200px;               /* 必须设定容器宽度 */
}

登录后复制

2. 多行文本溢出隐藏加省略号

CSS 原生的 text-overflow 不支持多行省略，但可以借助 -webkit-line-clamp 实现（兼容现代浏览器）：

.multi-line-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3;      /* 限制显示3行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px;
}

登录后复制

⚠️ 提示：-webkit-line-clamp 是 WebKit 特性，老旧IE不支持，但在移动端和主流桌面浏览器中广泛可用。

3. 隐藏溢出不显示省略号

如果只想简单裁剪掉超出内容，不需要任何标记：

Veed AI Voice Generator

Veed推出的AI语音生成器

查看详情

立即学习“前端免费学习笔记（深入）”；

.hide-overflow {
  overflow: hidden;
  width: 150px;
}

登录后复制

此时文本被截断，无省略号提示用户内容被隐藏。

基本上就这些常用方式，根据是否换行、是否需要提示来选择合适方案。

以上就是如何在CSS中设置文本溢出处理_text-overflow隐藏超出内容的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

如何使用CSS实现图标放大缩小平滑过渡_scale动画应用如何在CSS中实现元素动画移动_position与keyframes结合 css flexbox对齐方式align-content如何使用如何在CSS中实现背景渐变动画_linear-gradient与keyframes CSS浮动和inline-block的区别_布局模式选择分析