text-overflow: ellipsis 可解决文本溢出问题，但需同时设置 width、white-space: nowrap 和 overflow: hidden 才能生效；clip 值直接裁剪文本，ellipsis 显示省略号；自定义省略号样式需借助 JavaScript 检测 scrollWidth 与 clientWidth 判断溢出并动态添加元素；主流浏览器均支持 ellipsis，老版本 IE 需添加 -ms-text-overflow 兼容；其他处理方式包括 JavaScript 截断、CSS word-break 换行、Tooltip 显示全文或滚动条展示，具体选择依场景而定。
文本溢出？简单来说，就是文字内容太多，超出容器的限制，挤出来了。解决办法当然有，
text-overflow就是专门干这个的。它决定了当文本溢出时，是否显示省略号或其他视觉提示。
/* 示例代码 */
.container {
width: 200px; /* 容器宽度 */
white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 隐藏溢出部分 */
text-overflow: ellipsis; /* 显示省略号 */
}text-overflow属性，它不是万能的，需要配合
overflow: hidden和
white-space: nowrap才能发挥作用。
如何使用CSS控制文本溢出时的省略号样式？
text-overflow主要有
clip和
ellipsis两个值。
clip直接裁剪文本，不显示任何省略号。
ellipsis则在文本溢出时显示省略号（...），提示用户内容被截断。
如果想自定义省略号的样式，直接用CSS是做不到的。但我们可以通过JavaScript来监听文本是否溢出，然后动态地添加或修改省略号的样式。这稍微复杂一点，但提供了更大的灵活性。
立即学习“前端免费学习笔记（深入）”；
例如，你可以检测元素的
scrollWidth是否大于
clientWidth，如果大于，说明文本溢出了，然后就可以添加一个自定义的
span元素，里面放上你想要的省略号样式。
为什么设置了text-overflow: ellipsis却不生效？
这应该是最常见的问题了。记住，
text-overflow: ellipsis生效的前提条件是：
-
容器必须设置宽度： 比如
width: 200px
，让浏览器知道容器的边界在哪里。 -
white-space: nowrap
： 这个属性告诉浏览器不要换行，让文本在一行内显示。 -
overflow: hidden
： 隐藏溢出的部分，否则省略号就没地方显示了。
如果这三个条件缺一不可，检查一下你的CSS代码，看看是不是漏掉了哪个。
另外，有些情况下，父元素的样式也可能影响到
text-overflow的生效。比如，如果父元素设置了
display: flex，并且没有设置
align-items: flex-start，子元素的宽度可能会被拉伸，导致文本不溢出。
text-overflow属性在不同浏览器中的兼容性如何？
text-overflow的兼容性总体来说还是不错的。主流浏览器（Chrome, Firefox, Safari, Edge）都支持
text-overflow: ellipsis。但是，在一些老版本的IE浏览器中，可能需要添加
-ms-text-overflow: ellipsis来确保兼容性。
对于
text-overflow: clip，兼容性也很好，基本所有浏览器都支持。
为了确保最佳的兼容性，建议在使用
text-overflow时，进行充分的测试，特别是在需要支持老版本浏览器的项目中。
除了省略号，还有其他方式处理文本溢出吗？
当然有。除了使用
text-overflow显示省略号，还可以考虑以下几种方式：
- 使用JavaScript动态截断文本： 可以通过JavaScript获取文本的长度，然后根据容器的宽度动态截断文本，并在末尾添加省略号或其他提示。这种方式更加灵活，可以自定义截断的逻辑。
-
使用CSS
word-break: break-all
或word-wrap: break-word
： 这两个属性可以让浏览器在单词内部进行换行，避免文本溢出。但这种方式可能会破坏单词的完整性，需要根据具体情况选择。 - 使用Tooltip或Popover： 当文本溢出时，可以通过Tooltip或Popover显示完整的文本内容。这种方式可以避免截断文本，让用户能够看到完整的信息。
- 使用滚动条： 如果文本内容非常长，可以考虑使用滚动条来显示溢出的部分。但这种方式可能会影响用户体验，需要谨慎使用。
选择哪种方式取决于具体的需求和场景。如果只是想简单地显示省略号，
text-overflow是最方便的选择。如果需要更灵活的控制，可以考虑使用JavaScript或其他CSS属性。
