HTML 内容不换行并超出显示省略号

在前端开发中，我们经常需要限制某段文字在一行或多行内显示，如果超出指定范围则自动显示 ...。这可以通过 CSS 的 text-overflow 属性配合一些其他属性实现。

---

单行省略号

最常见的场景就是：一行文字过长时，用 ... 表示被截断的部分。

示例代码

<div class="ellipsis">
  <span>这是一个很长很长的文本内容，希望超出后显示省略号而不是换行</span>
</div>

.ellipsis {
  width: 200px;              /* 限制宽度，必须有 */
  white-space: nowrap;       /* 不换行 */
  overflow: hidden;          /* 超出隐藏 */
  text-overflow: ellipsis;   /* 超出显示 ... */
}

---

多行省略号

如果你需要 多行文本显示省略号，可以用 -webkit-line-clamp。

示例代码

<div class="multi-ellipsis">
  这是一个很长很长的文本内容，希望超过两行后显示省略号而不是无限换行。
  这是第二段内容，测试多行省略效果。
</div>

.multi-ellipsis {
  width: 200px;
  display: -webkit-box;
  -webkit-line-clamp: 2;        /* 限制显示 2 行 */
  -webkit-box-orient: vertical; /* 垂直排列 */
  overflow: hidden;
  text-overflow: ellipsis;
}

注意事项

• -webkit-line-clamp 是 WebKit 内核的私有属性，常见于 Chrome、Safari、Edge 等现代浏览器。
• 如果需要兼容性更强的方案，可以通过 JavaScript 截断文本。

---

Flex 布局下的省略号

在使用 flex 布局时，很多人发现 text-overflow: ellipsis 不生效，这是因为 flex 子元素默认会撑开。 解决方法是给文本元素加上 min-width: 0; 或 max-width: 100%;。

示例代码

<div class="flex-container">
  <span class="label">标题：</span>
  <span class="content">这是一个很长很长的内容，在 flex 布局下也要显示省略号</span>
</div>

.flex-container {
  display: flex;
  width: 300px;
  border: 1px solid #ddd;
}

.label {
  flex-shrink: 0;   /* 标签部分不压缩 */
}

.content {
  flex: 1;                  /* 占满剩余空间 */
  min-width: 0;             /* ⭐ 关键点：允许压缩宽度 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

关键点

• min-width: 0; → 默认 flex 项的 min-width 是 auto，会阻止收缩，导致 ... 不生效。
• flex-shrink: 0; → 用于固定不需要收缩的部分，比如左边的 label。

---

鼠标悬浮显示完整内容

text-overflow: ellipsis; 只会截断显示文本，并不会自动在悬浮时显示完整内容。如果想要在鼠标悬浮时看到完整文本，可以用以下几种方式：

方案一：title 属性（简单直接）

<span class="ellipsis" title="这是一个很长很长的文本内容，希望超出后显示省略号而不是换行">
  这是一个很长很长的文本内容，希望超出后显示省略号而不是换行
</span>

---

方案二：UI 框架的 Tooltip（推荐）

Element Plus 示例

<template>
  <el-tooltip effect="dark" :content="text" placement="top">
    <span class="ellipsis">{{ text }}</span>
  </el-tooltip>
</template>

<script setup>
const text = "这是一个很长很长的文本内容，希望超出后显示省略号而不是换行";
</script>

<style scoped>
.ellipsis {
  display: inline-block;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

---

方案三：自定义 Tooltip

<div class="tooltip-box">
  <span class="ellipsis">这是一个很长很长的文本内容，希望超出后显示省略号而不是换行</span>
  <div class="tooltip-content">这是一个很长很长的文本内容，希望超出后显示省略号而不是换行</div>
</div>

.tooltip-box {
  position: relative;
  display: inline-block;
}

.ellipsis {
  display: inline-block;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tooltip-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #333;
  color: #fff;
  padding: 5px 10px;
  white-space: normal;  /* 悬浮时正常换行 */
  z-index: 99;
}

.tooltip-box:hover .tooltip-content {
  display: block;
}

---

多语言兼容性（中文 / 英文 / 长单词）

在国际化项目中，除了中文，还会遇到 英文句子 或 超长单词。 默认情况下，英文长单词不会自动换行，可能会导致布局被撑开。

常见处理方案

.word-wrap {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  word-wrap: break-word;   /* 允许长单词换行 */
  word-break: break-all;   /* 强制长单词在任意位置换行 */
}

属性解释

• word-wrap: break-word; 在长单词超出容器时，允许在边界自动换行（推荐）。

• word-break: break-all; 强制在任意位置换行，可能影响英文单词的可读性，但能避免页面被撑破。

• white-space 如果设置了 nowrap，即使 word-break 生效也不会换行，要根据场景选择。

---

常见踩坑点总结

在实际开发中，很多人写了样式但 ... 还是不出现，常见问题有：

1. 忘记设置宽度 必须写 width 或 max-width，否则浏览器不知道什么时候截断。

2. 元素是 inline span 默认是 inline，不会生效。 解决方法：加 display: inline-block; 或放在 block 容器中。

3. overflow 没写 hidden 如果不写 overflow: hidden;，超出部分会照常显示。

4. 多行省略兼容性问题 -webkit-line-clamp 在 IE、部分老版本浏览器不支持。 如果要兼容，需要 JS 截断。

5. 父元素限制 如果父元素本身没有固定宽度，而是 flex: 1; 或 auto，那么 ellipsis 可能无法生效。 可以给父容器设置 max-width 或 flex-shrink: 1;。

6. Flex 布局特殊性 记得给文字所在的元素加上 min-width: 0;，否则省略号无效。

7. 多语言兼容性 英文长单词需要 word-wrap 或 word-break，否则可能撑破布局。

---

总结

• 单行省略号：white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
• 多行省略号：-webkit-line-clamp，但注意兼容性
• Flex 布局：要加 min-width: 0; 才能让省略号生效
• 鼠标悬浮完整显示：用 title、UI 框架的 Tooltip 或自定义 Tooltip
• 多语言兼容性：英文长单词要用 word-wrap: break-word; 或 word-break: break-all;
• 避免踩坑：记住宽度、overflow、元素类型、父容器限制等关键点

---

这样你就能在 普通布局、多行文本、flex 布局、多语言环境 下都完美使用省略号，并且还能在悬浮时显示完整内容了 🎉。