CSS实现单行、多行文本溢出显示省略号(…)

在网页设计中,我们常常遇到这样的情况:文本内容太长,无法完全显示在一个固定的区域内。为了让界面看起来更整洁,我们可以使用省略号(...)来表示内容溢出。这不仅能提升用户体验,还能避免内容溢出导致的页面混乱。

本文将介绍如何用 CSS 实现 单行文本溢出省略号多行文本溢出省略号

1. 单行文本溢出省略号

对于单行文本溢出省略号,CSS 提供了一个非常简单的解决方案,只需要使用几个常见的属性即可。

代码示例:

html 复制代码
<div class="single-line">
  这是一段非常长的文本,如果文本内容超过了这个容器的宽度,它会显示省略号。
</div>
css 复制代码
.single-line {
  width: 200px;           /* 设置容器宽度 */
  white-space: nowrap;    /* 不换行 */
  overflow: hidden;       /* 超出容器的部分隐藏 */
  text-overflow: ellipsis; /* 超出的部分用省略号表示 */
}

解释:

  • white-space: nowrap;:禁止文本换行,让文本保持在同一行。
  • overflow: hidden;:隐藏超出容器的内容。
  • text-overflow: ellipsis;:在文本超出容器时显示省略号。

通过这三个属性,文本会在容器宽度不足时自动显示省略号。

2. 多行文本溢出省略号

有时,我们希望文本是多行的,并且当文本超过指定行数时也显示省略号。这个功能在网页中非常常见,比如新闻摘要、文章简介等。

代码示例:

html 复制代码
<div class="multi-line">
  这是一个多行文本示例。如果文本太长,它将显示省略号。你可以继续添加更多的内容,直到它超出设置的行数。
</div>
css 复制代码
.multi-line {
  width: 300px;             /* 设置容器宽度 */
  height: 60px;             /* 设置固定高度(显示两行文本) */
  line-height: 30px;        /* 行高,确保文本正常显示 */
  overflow: hidden;         /* 超出部分隐藏 */
  display: -webkit-box;     /* 使用 Flexbox 布局 */
  -webkit-box-orient: vertical; /* 设置盒子为垂直方向排列 */
  -webkit-line-clamp: 2;    /* 限制显示的行数 */
  text-overflow: ellipsis;  /* 超出部分用省略号表示 */
}

解释:

  • display: -webkit-box;:让元素使用 WebKit 盒子模型布局(主要是为了兼容 Webkit 引擎的浏览器,如 Chrome 和 Safari)。
  • -webkit-box-orient: vertical;:设置布局为垂直方向,使文本按行显示。
  • -webkit-line-clamp: 2; :限制显示的行数,2 表示最多显示两行文本,超出的部分会被省略。
  • text-overflow: ellipsis;:超出部分显示省略号。

注意事项:

  • -webkit-line-clamp 是一个 WebKit 特有的 CSS 属性,因此它在某些浏览器(如 Firefox)中可能不被支持。
  • 多行溢出效果并非所有浏览器都支持,特别是 Firefox 在某些版本中可能没有实现这一特性,具体支持情况可以参考各浏览器的文档。

总结

使用 CSS 实现单行和多行文本溢出显示省略号是一个非常常见且简单的功能,可以大大提升网页的排版和用户体验。在单行文本溢出时,使用 text-overflow: ellipsis 配合 white-space: nowrapoverflow: hidden 就可以实现。而对于多行文本溢出,可以借助 Webkit 提供的 -webkit-line-clamp 来限制显示的行数并加上省略号。

相关推荐
hahala23338 分钟前
ESLint 提交前校验技术方案
前端
夕水30 分钟前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
我麻烦大了33 分钟前
实现一个简单的Vue响应式
前端·vue.js
独立开阀者_FwtCoder41 分钟前
你用 Cursor 写公司的代码安全吗?
前端·javascript·github
Cacciatore->1 小时前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~1 小时前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo1 小时前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
贵沫末1 小时前
React——基础
前端·react.js·前端框架
每天开心1 小时前
深入理解 CSS 选择器:从基础到高级
css·html·ai编程
aklry1 小时前
uniapp三步完成一维码的生成
前端·vue.js