css文本溢出省略号实现方法-css教程-PHP中文网

css文本溢出省略号实现方法

P粉602998670

发布： 2025-10-22 22:22:02

原创

283人浏览过

单行文本溢出用white-space:nowrap、overflow:hidden和text-overflow:ellipsis实现；多行则通过display:-webkit-box、-webkit-line-clamp和-webkit-box-orient:vertical完成，需限定宽度。

css文本溢出省略号实现方法

当文本内容超出容器宽度时，用省略号（...）表示溢出是常见的UI需求。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;
}

登录后复制

多行文本溢出省略号

用于限制显示2行或更多行文本，超出部分用省略号表示。标准做法依赖 -webkit-line-clamp，目前在主流浏览器中广泛支持。

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

Matlab语言的特点中文WORD版

本文档主要讲述的是Matlab语言的特点；Matlab具有用法简单、灵活、程式结构性强、延展性好等优点，已经逐渐成为科技计算、视图交互系统和程序中的首选语言工具。特别是它在线性代数、数理统计、自动控制、数字信号处理、动态系统仿真等方面表现突出，已经成为科研工作人员和工程技术人员进行科学研究和生产实践的有利武器。希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看

查看详情

关键属性：

display: -webkit-box：启用弹性盒子模型（WebKit私有）
-webkit-line-clamp：限制行数
-webkit-box-orient: vertical：设置子元素垂直排列
overflow: hidden：配合实现截断效果

示例代码（限制2行）：

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

登录后复制