CSS 内容超出显示省略号

CSS 内容超出显示省略号

文章目录

  • [CSS 内容超出显示省略号](#CSS 内容超出显示省略号)
      • [**1. 单行文本省略(常用)**](#1. 单行文本省略(常用))
      • [**2. 多行文本省略(如 2 行)**](#2. 多行文本省略(如 2 行))
      • [**3. 对非块级元素生效**](#3. 对非块级元素生效)
      • **完整示例**
      • **注意事项**

在 CSS 中实现内容超出显示省略号,主要通过控制文本溢出行为来实现。以下是不同场景下的实现方法:


1. 单行文本省略(常用)

css 复制代码
.ellipsis {
  width: 200px;          /* 必须设置固定宽度或最大宽度 */
  overflow: hidden;      /* 隐藏溢出内容 */
  white-space: nowrap;   /* 强制文本不换行 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

关键点

  • widthmax-width 必须明确(否则容器无法判断何时溢出)。
  • white-space: nowrap 强制文本单行显示。
  • text-overflow: ellipsis 需配合 overflow: hidden 使用。

2. 多行文本省略(如 2 行)

css 复制代码
.multiline-ellipsis {
  width: 200px;
  display: -webkit-box;           /* 使用旧版弹性盒子模型 */
  -webkit-box-orient: vertical;   /* 内容垂直排列 */
  -webkit-line-clamp: 2;          /* 限制显示行数 */
  overflow: hidden;               /* 隐藏溢出内容 */
}

注意

  • 这是 -webkit- 私有属性,兼容性有限(主要支持 WebKit 内核浏览器,如 Chrome/Safari)。
  • 不支持 Firefox 和 IE,需根据项目需求谨慎使用。

3. 对非块级元素生效

若元素默认是行内元素(如 <span>),需添加 display: blockinline-block

css 复制代码
span.ellipsis {
  display: inline-block; /* 或 block */
  width: 100px;
  overflow: hidden;
  white-space: nowrap;/* 强制文本不换行 */
  text-overflow: ellipsis;
}

完整示例

css 复制代码
<!DOCTYPE html>
<style>
  .single-line {
    width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border: 1px solid #ccc;
  }

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

<!-- 单行省略 -->
<div class="single-line">这是一段非常非常非常非常非常非常非常长的单行文本</div>

<!-- 多行省略 -->
<div class="multi-line">这是一段非常非常非常非常非常非常非常长的多行文本,这里的内容会在第二行末尾截断并显示省略号。</div>

注意事项

  • 单行省略:广泛兼容所有现代浏览器。
  • 多行省略:推荐在移动端或 WebKit 内核环境使用,其他场景可考虑后端截断或 JavaScript 方案。
  • 容器尺寸:务必明确容器的宽度(单行)或高度(多行),否则无法触发溢出效果。

:推荐在移动端或 WebKit 内核环境使用,其他场景可考虑后端截断或 JavaScript 方案。

  • 容器尺寸:务必明确容器的宽度(单行)或高度(多行),否则无法触发溢出效果。

根据需求选择合适方案,单行场景推荐优先使用 text-overflow: ellipsis

相关推荐
Micro麦可乐12 分钟前
前端图片裁剪上传全流程详解:从预览到上传的完整流程
前端·javascript·图片上传·图片裁切·cropper.js
Am1nnn1 小时前
CICD编译时遇到npm error code EINTEGRITY的问题
前端·npm·node.js
测试工程喵2 小时前
如何测试JWT的安全性:全面防御JSON Web Token的安全漏洞
前端·网络·功能测试·安全·json·接口测试·token
Python私教3 小时前
PrimeVue菜单组件深度解析:构建高效能的Web导航系统
前端·javascript·vue.js
iamtsfw4 小时前
记录:express router,可以让node.js后端文件里的路由分布的更清晰
前端·node.js
黑匣子~5 小时前
Vue 3 官方 Hooks 的用法与实现原理
前端·javascript·vue.js
Yvonne爱编码5 小时前
CSS-5.1 Transition 过渡
前端·css·状态模式·html5·hbuilder
恰恰兄5 小时前
webpack性能优化
前端·webpack·node.js
23级二本计科5 小时前
对Web界面进行简单自动化测试Selenium
前端·数据库
霍志杰7 小时前
iframe加载或者切换时候,短暂的白屏频闪问题解决
前端·javascript·chrome