单行文本溢出通过设置width、overflow: hidden、white-space: nowrap和text-overflow: ellipsis实现；多行则常用-webkit-line-clamp（兼容性差）或JavaScript方案，需注意容器宽度、display类型、浏览器兼容及可访问性问题。
CSS字体文本溢出通常通过结合
overflow、
white-space和
text-overflow这三个CSS属性来处理，其核心思想是隐藏超出容器范围的内容，防止文本换行，并用省略号（或其他符号）指示内容被截断。对于单行文本，这几乎是标准做法；而多行文本则需要更巧妙的，有时是带前缀的CSS属性或JavaScript辅助。
解决方案
说实话，每次遇到文本溢出这事儿，我心里都嘀咕：这看着简单，但要真做到“优雅”和“兼容”，还真得费点心思。最直接的方案，也就是大家最常用的，是针对单行文本的截断。这就像是给一头大象穿小鞋，总得想办法让它看起来不那么挤，或者干脆只露出半截。
基本思路是：
- 限制容器宽度：这是前提，没有固定宽度，文本自然会撑开，哪来的溢出？
-
隐藏溢出内容：
overflow: hidden;
，让超出容器边界的部分直接消失。 -
禁止文本换行：
white-space: nowrap;
，确保文本始终在一行显示，而不是自动折行。 -
显示省略号：
text-overflow: ellipsis;
，在文本被截断的地方显示三个点。
这套组合拳下来，单行文本溢出问题基本就能解决了。但实际项目里，我们总会遇到些“奇葩”需求，比如多行文本溢出，那就不是这三板斧能搞定的了。
立即学习“前端免费学习笔记（深入）”；
如何实现单行文本溢出显示省略号？
实现单行文本溢出并显示省略号，是我在前端开发中处理这类问题的首选。它直观、高效，而且浏览器兼容性极好。你只需要给你的文本容器加上这几行CSS，就能看到效果。
.single-line-ellipsis {
width: 200px; /* 必须指定宽度，否则溢出无从谈起 */
overflow: hidden; /* 隐藏超出容器的内容 */
white-space: nowrap; /* 文本不换行 */
text-overflow: ellipsis; /* 用省略号表示文本被截断 */
}我个人觉得，这几行代码虽然简单，背后可藏着不少学问。
width是关键，没有它，
overflow: hidden和
text-overflow: ellipsis就失去了作用对象。
white-space: nowrap确保了文本不会自行折行，这在很多布局场景下非常重要，比如导航菜单项或者列表标题。如果文本允许换行，那么溢出可能就不会发生，或者发生的形态就不是我们想要的单行截断了。
当然，这种处理方式也有它的局限性。用户看不到被截断的内容，这在信息量比较大的场景下可能会影响用户体验。所以，有时候我会搭配
title属性或者鼠标悬停时显示完整内容的工具提示（tooltip），作为一种补充。这是一种权衡，在保持界面整洁和信息完整性之间找到平衡点。
CSS多行文本溢出如何优雅地处理并显示省略号？
多行文本溢出显示省略号，这可就不是单行那么“傻瓜式”了。说实话，这在CSS世界里一直是个让人头疼的问题，因为标准CSS并没有一个直接的属性来优雅地处理多行文本的截断。我们现在能用的大部分方案，其实都依赖于一个非标准的WebKit私有属性，或者退而求其次，使用JavaScript。
最常见的CSS方案是利用
-webkit-line-clamp：
.multi-line-ellipsis {
overflow: hidden; /* 隐藏超出容器的内容 */
text-overflow: ellipsis; /* 同样使用省略号 */
display: -webkit-box; /* 必须设置为弹性盒模型 */
-webkit-line-clamp: 3; /* 限制文本在3行内显示 */
-webkit-box-orient: vertical; /* 盒子内部内容垂直排列 */
/* 注意：此方案主要适用于Webkit内核浏览器（Chrome, Safari等） */
}这个方案的原理是把容器变成一个特殊的弹性盒，然后通过
-webkit-line-clamp指定要显示的行数。它确实很方便，但问题在于，它是一个非标准的属性，主要在WebKit内核的浏览器中有效。这意味着在Firefox、IE/Edge（旧版）等浏览器中，它可能不会按预期工作，文本会直接被截断，而不会显示省略号，或者根本不起作用。
我个人觉得，虽然CSS能搞定大部分，但有些时候，真得靠JS来“擦屁股”。对于需要高度兼容性的多行文本溢出，JavaScript可能是更稳妥的选择。它能更精确地计算文本高度，动态添加或移除内容，甚至根据视口大小进行响应式调整。当然，引入JS会增加一些性能开销和开发复杂度，这也是需要权衡的地方。
处理文本溢出时，有哪些常见的陷阱和兼容性问题？
在处理文本溢出时，我踩过不少坑，也遇到过各种奇奇怪怪的兼容性问题。这些“陷阱”有时候会让人抓狂，但一旦你了解了它们，就能更好地规避。
忘记设置容器宽度：这是最常见的问题。无论是单行还是多行溢出，你的文本容器（比如
div
、p
）都必须有一个明确的宽度（width
或max-width
），否则文本会无限撑开，根本不会发生“溢出”。我见过太多次新手犯这个错误，然后疑惑为什么text-overflow: ellipsis
不生效。display
属性的限制：overflow: hidden
和text-overflow: ellipsis
只对块级元素或行内块级元素有效。如果你尝试将它们应用于纯粹的行内元素（如span
），它们是不会起作用的。在这种情况下，你需要将span
转换为display: block;
或display: inline-block;
。多行溢出的浏览器兼容性：前面提到的
-webkit-line-clamp
是最大的痛点。它在Chrome和Safari表现完美，但在Firefox、Edge（尤其是旧版）或IE中，你可能会看到文本直接被剪裁，没有省略号，或者根本不生效。这就要求我们必须考虑备用方案：要么接受在非WebKit浏览器中的降级体验（比如直接裁剪），要么引入JavaScript库，或者为这些浏览器提供不同的样式。-
white-space
与word-break
的混淆：white-space: nowrap;
是防止文本换行，即使遇到空格也不会断开。word-break: break-all;
（或break-word
，现在推荐overflow-wrap: break-word;
）则是允许长单词在不适合时被强制断开，即使没有空格。 这两个属性有不同的用途，如果一个超长单词没有空格，nowrap
会导致它超出容器，而word-break
则能让它在容器内断开。理解它们之间的区别，能帮助你更灵活地处理各种文本布局。
可访问性问题：文本被截断，意味着部分内容对用户是不可见的。对于依赖屏幕阅读器的用户，或者视力不佳的用户，这会造成信息丢失。因此，在设计时，我们应该考虑提供完整的文本内容，比如通过
title
属性在鼠标悬停时显示，或者提供一个“展开/收起”按钮来切换内容的完整显示。过度依赖截断可能会损害用户体验和网站的可访问性。
