如何使用CSS设置元素溢出省略_text-overflow技巧-css教程-PHP中文网

如何使用CSS设置元素溢出省略_text-overflow技巧

P粉602998670

发布： 2025-11-19 02:51:08

原创

688人浏览过

单行文本溢出需设置white-space: nowrap、overflow: hidden和text-overflow: ellipsis，并限定宽度；多行则使用-webkit-box、-webkit-line-clamp和-webkit-box-orient实现，适用于现代浏览器。

如何使用css设置元素溢出省略_text-overflow技巧

当文本内容超出容器宽度时，使用CSS实现溢出部分显示为省略号（...）是一种常见需求。这在标题、列表项或卡片组件中尤为实用。要正确实现这一效果，需要结合多个CSS属性协同工作。

适用于只允许显示一行的文本，超出部分以“...”表示。

关键属性：

示例代码：

.single-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px; /* 必须限定宽度 */
}

登录后复制

当希望限制文本显示为两行或三行时，标准的 text-overflow 不再适用，需借助 WebKit 特性。

千面视频动捕

千面视频动捕是一个AI视频动捕解决方案，专注于将视频中的人体关节二维信息转化为三维模型动作。

173

适用场景：

示例代码（支持2行省略）：

.multi-line {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 控制行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 200px;
}

登录后复制

注意：-webkit-line-clamp 兼容性较好，但非标准属性，建议用于现代浏览器环境。

确保省略效果正常显示，需注意以下几点：

基本上就这些，掌握这几个属性组合，就能应对大多数文本截断场景。

以上就是如何使用CSS设置元素溢出省略_text-overflow技巧的详细内容，更多请关注php中文网其它相关文章！

大家都在看：