学习

文本溢出显示省略号

2026-02-23/0/ 编辑

文本溢出显示省略号

单行文本和多行文本溢出隐藏并显示省略号 ... 在实际项目开发中经常使用。

一、单行文本溢出显示省略号

必要属性

/* 文字不换行 */
white-space: nowrap;
/* 超出显示省略号 */
text-overflow: ellipsis;
/* 超出部分隐藏 */
overflow: hidden;

案例演示

<style>
  p {
    width: 200px;
    height: 50px;
    border: 1px solid #ddd;
    line-height: 50px;
    /* 文字不换行 */
    white-space: nowrap;
    /* 超出显示省略号 */
    text-overflow: ellipsis;
    /* 超出部分隐藏 */
    overflow: hidden;
  }
</style>
<body>
  <p>当文字的内容超容器的宽度时,会显示3个省略号</p>
</body>

text-overflow 属性值

属性值	描述
`clip`	默认值,裁剪文本,不显示省略号
`ellipsis`	显示省略号 `...`

二、多行文本溢出显示省略号

必要属性

/* 超出部分隐藏 */
overflow: hidden;
/* 超出部分显示省略号 */
text-overflow: ellipsis;
/* 对象做为弹性盒子模型显示 */
display: -webkit-box;
/* 块容器中的内容限制为指定的行数 */
-webkit-line-clamp: 2;
/* 弹性盒子对象的子元素排列方式为竖排 */
-webkit-box-orient: vertical;

案例演示

<style>
  p {
    width: 200px;
    height: 100px;
    border: 1px solid #ddd;
    line-height: 50px;
    /* 超出部分隐藏 */
    overflow: hidden;
    /* 超出部分显示省略号 */
    text-overflow: ellipsis;
    /* 对象做为弹性盒子模型显示 */
    display: -webkit-box;
    /* 块容器中的内容限制为指定的行数 */
    -webkit-line-clamp: 2;
    /* 弹性盒子对象的子元素排列方式为竖排 */
    -webkit-box-orient: vertical;
  }
</style>
<body>
  <p>当文字的内容超容器的宽度时,会显示3个省略号当文字的内容超容器的宽度时,</p>
</body>

重要注意事项

⚠️ 只有当元素的高 = line-height 大小 × -webkit-line-clamp(指定行数)时,才能显示出正确的效果。

/* ✅ 正确 */
p {
  width: 200px;
  height: 100px; /* 50px × 2 = 100px */
  line-height: 50px;
  -webkit-line-clamp: 2;
}

/* ❌ 错误 */
p {
  width: 200px;
  height: 80px; /* 50px × 2 ≠ 80px,高度不够 */
  line-height: 50px;
  -webkit-line-clamp: 2;
}

三、实战应用场景

场景1: 文章标题

.article-title {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

场景2: 文章摘要

.article-summary {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 显示3行 */
  -webkit-box-orient: vertical;
  line-height: 1.6;
  max-height: calc(1.6em * 3); /* 确保高度正确 */
}

场景3: 用户简介

.user-bio {
  width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

场景4: 评论内容

.comment-text {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

场景5: 卡片标题和描述

<style>
  .card {
    width: 300px;
  }
  
  .card-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 18px;
    font-weight: bold;
  }
  
  .card-description {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.5;
    max-height: calc(1.5em * 2);
    color: #666;
  }
</style>

<div class="card">
  <h3 class="card-title">这是一个很长的卡片标题,超过宽度会显示省略号</h3>
  <p class="card-description">这是卡片的描述内容,如果超过两行也会显示省略号,这样可以保持卡片的整齐美观。</p>
</div>

四、兼容性问题

1. 多行省略号兼容性

多行文本省略号主要使用 -webkit- 前缀,在 WebKit 内核浏览器中支持良好。

不支持多行省略号的浏览器:

旧版 Firefox
IE
某些移动端浏览器

解决方案:

/* 方案1: 使用 JavaScript */
.truncate-text {
  width: 200px;
  overflow: hidden;
  position: relative;
}

/* 方案2: 使用 line-clamp 属性(新标准) */
.truncate-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* 新标准 */
  line-clamp: 3;
}

2. 添加浏览器前缀

/* 单行省略号 */
.text-overflow {
  -ms-text-overflow: ellipsis;      /* IE */
  -o-text-overflow: ellipsis;      /* Opera */
  text-overflow: ellipsis;
}

五、常见问题

问题1: 单行省略号不显示

可能原因:

没有设置 overflow: hidden
没有设置 white-space: nowrap
元素宽度不够或未设置宽度

解决方法:

/* ✅ 完整的三个属性必须同时设置 */
.ellipsis {
  width: 200px; /* 或 max-width */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

问题2: 多行省略号不显示

可能原因:

高度计算不正确
没有使用 -webkit- 前缀
浏览器不支持

解决方法:

/* ✅ 确保高度正确 */
.multi-ellipsis {
  width: 200px;
  line-height: 1.5;
  max-height: calc(1.5em * 3); /* 3行的高度 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

问题3: 省略号显示但不换行

可能原因: 多行省略号时忘记设置 display: -webkit-box

解决方法:

/* ✅ 必须设置 display: -webkit-box */
.multi-ellipsis {
  display: -webkit-box; /* 必须设置 */
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

六、最佳实践

1. 使用 CSS Mixin(预处理器)

// 单行省略号
@mixin text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 多行省略号
@mixin text-overflow-multiline($lines: 2) {
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 使用
.title {
  @include text-overflow;
  width: 100%;
}

.description {
  @include text-overflow-multiline(3);
  line-height: 1.6;
}

2. 使用 CSS 自定义属性

:root {
  --max-lines: 3;
  --line-height: 1.6;
}

.multi-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: var(--max-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: var(--line-height);
  max-height: calc(var(--line-height) * var(--max-lines));
}

css学习