文本溢出解决方案一、单行文本溢出：white-space + overflow + text-overflow 核心实现

一、单行文本溢出：white-space + overflow + text-overflow

核心实现：

.ellipsis {
  white-space: nowrap;       /* 禁止文本换行，强制单行显示 */
  overflow: hidden;          /* 溢出内容隐藏 */
  text-overflow: ellipsis;   /* 溢出部分显示省略号 */
}

原理解析：

white-space: nowrap：取消文本自动换行，确保内容在同一行；
overflow: hidden：超出容器的部分隐藏；
text-overflow: ellipsis：触发省略号显示（需搭配前两个属性）。

适用场景：

标题、列表项、表格单元格等需要固定单行显示的场景。

二、多行文本溢出：-webkit-line-clamp + 弹性布局

标准方案（Webkit内核）：

.multi-ellipsis {
  display: -webkit-box;      /* 启用弹性盒模型 */
  -webkit-box-orient: vertical; /* 垂直排列子元素 */
  -webkit-line-clamp: 2;     /* 限制显示行数 */
  overflow: hidden;          /* 溢出隐藏 */
}

兼容性补充（非Webkit内核）：

/* 兼容Firefox（需配合JavaScript） */
@supports (-moz-appearance: none) {
  .multi-ellipsis {
    position: relative;
    line-height: 1.5;
    max-height: 3em; /* 行数×行高 */
    overflow: hidden;
  }
  .multi-ellipsis::after {
    content: '...';
    position: absolute;
    bottom: 0;
    right: 0;
    padding-left: 20px;
    background: linear-gradient(to left, transparent, #fff);
  }
}

原理与限制：

-webkit-line-clamp：本质是通过CSS实现文本截断，仅Webkit内核（Chrome/Safari）支持；
局限性：
- 需配合display: -webkit-box和-webkit-box-orient；
- 非标准属性，Firefox/Edge需手动模拟（如上述代码）；
- 无法精确控制截断位置，依赖行高计算。

三、弹性溢出：max-width + word-break + hyphens

自适应文本溢出处理：

.flexible-text {
  max-width: 300px;           /* 最大宽度，避免文本过宽 */
  word-break: break-word;     /* 单词内换行（兼容长单词） */
  word-wrap: break-word;      /* （旧版）同word-break */
  hyphens: auto;              /* 单词断行时添加连字符 */
}

场景与属性对比：

属性	作用	兼容性
`word-break: normal`	按正常规则换行（不强制断词）	全兼容
`word-break: break-all`	强制断词（可能破坏单词完整性）	全兼容
`word-break: keep-all`	保持单词完整（仅在空格/标点处换行）	全兼容
`hyphens: auto`	自动添加断字连字符（需语言支持）	Chrome/Safari

典型案例：

新闻正文、博客内容等需要自适应不同屏幕宽度的场景，避免长单词溢出容器。

四、特殊场景解决方案

1. 垂直溢出：line-clamp结合JS动态计算

// 动态设置最大行数（适用于动态内容）
function setMaxLines(element, maxLines) {
  const lineHeight = getComputedStyle(element).lineHeight;
  const lineHeightNum = parseFloat(lineHeight) || 1.5; // 默认为1.5倍行高
  element.style.maxHeight = `${lineHeightNum * maxLines}em`;
  element.style.overflow = 'hidden';
  // 可选：添加省略号
  if (!element.querySelector('::after')) {
    element.insertAdjacentHTML('beforeend', '<span class="ellipsis-marker">...</span>');
  }
}

2. 移动端长文本优化：clamp()动态调整字体大小

.responsive-text {
  font-size: clamp(16px, 2vw, 24px); /* 字体大小随视口动态调整 */
  max-width: 100%;
  overflow: hidden;
}

3. 自定义省略号样式

.custom-ellipsis::after {
  content: ' [阅读更多]';
  color: #3498db;
  font-weight: bold;
}

五、问题

1. 多行文本溢出在Firefox中如何兼容？

答：
Webkit的-webkit-line-clamp不兼容Firefox，可通过以下方案处理：
1. 纯CSS方案：利用line-height和max-height限制行数，配合伪元素添加省略号（如前文代码）；
2. JS方案：通过offsetHeight与scrollHeight对比判断文本是否溢出，溢出时截断并添加省略号。

2. 文本溢出时如何保留最后一个完整单词？

答：
使用word-break: keep-all属性，该属性会阻止单词内部断行，仅在空格或标点处换行。例如：

.preserve-word {
  word-break: keep-all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 单行场景 */
}

3. 如何实现文本溢出时显示“展开/收起”按钮？

答：
可结合JS与CSS实现：
1. 初始状态限制行数并显示“展开”按钮；
2. 点击按钮时移除行数限制，按钮切换为“收起”；
3. 通过element.scrollHeight > element.clientHeight判断是否溢出。

六、总结

单行溢出：white-space + overflow + text-overflow三剑客；
多行溢出：Webkit用-webkit-line-clamp，其他内核手动模拟；
弹性场景：word-break控制断词，hyphens优化断行；
动态内容：JS计算行高与最大高度，配合CSS实现自适应。