text-overflow需配合white-space和overflow使用，white-space: normal允许换行，overflow: hidden隐藏溢出内容，text-overflow: ellipsis显示省略号；多行溢出可用-webkit-line-clamp，但兼容性有限；不生效常见原因为white-space或overflow设置不当、容器宽度不足；除ellipsis外，还可使用clip或自定义字符串；JavaScript可通过检测溢出添加title提示或展开按钮提升交互体验。
CSS中
text-overflow属性主要用于处理文本溢出，它本身并不直接控制换行。要让
text-overflow与换行配合使用，需要结合其他CSS属性来实现。核心在于先允许文本换行，然后当文本溢出容器时，才显示省略号。
解决方案：
要使
text-overflow与换行正确协同工作，关键在于正确设置
white-space和
overflow属性。以下是一个常见的解决方案：
.container {
width: 200px; /* 容器宽度 */
white-space: normal; /* 允许文本换行 */
overflow: hidden; /* 隐藏溢出文本 */
text-overflow: ellipsis; /* 显示省略号 */
}这段代码首先定义了一个宽度为200像素的容器。
white-space: normal允许文本根据容器宽度自动换行。
overflow: hidden隐藏超出容器范围的文本。最后，
text-overflow: ellipsis在文本溢出时显示省略号。
立即学习“前端免费学习笔记（深入）”；
如果省略
white-space: normal，默认值通常是
white-space: nowrap，这会导致文本不换行，
text-overflow会生效，但可能不是你想要的效果，因为文本会直接被截断并显示省略号，而不会尝试换行。
如果
overflow设置为
visible，则溢出的文本会显示出来，
text-overflow将不起作用。
如何处理多行文本溢出？
处理多行文本溢出比单行稍微复杂一些。你需要借助
-webkit-line-clamp属性，但要注意，这个属性有兼容性问题，主要在webkit内核的浏览器中支持。
.container {
width: 200px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3; /* 显示的行数 */
-webkit-box-orient: vertical;
}这里，
display: -webkit-box和
-webkit-box-orient: vertical是必需的，它们将容器设置为一个垂直方向的弹性盒子。
-webkit-line-clamp: 3指定了显示的行数为3。超出这3行的文本将被隐藏，并且会显示省略号。注意，这种方法不依赖于
text-overflow属性。
需要注意的是，这种方法在非webkit内核的浏览器中可能无效。为了更好的兼容性，可以考虑使用JavaScript库或者服务端渲染来处理多行文本溢出。
为什么我的text-overflow不生效？
text-overflow不生效通常有几个原因：
-
white-space
属性设置不正确： 确保white-space
不是nowrap
，否则文本不会换行，text-overflow
只能在单行文本溢出时生效。 -
overflow
属性设置不正确： 必须设置overflow: hidden
或overflow: scroll
，否则溢出的文本会直接显示出来，text-overflow
不起作用。 -
容器宽度未定义或过大： 如果容器没有明确的宽度，或者宽度足够容纳所有文本，就不会发生溢出，
text-overflow
也不会生效。 -
父元素影响： 有时父元素的样式可能会影响
text-overflow
的显示。检查父元素的overflow
属性，确保它不会阻止子元素显示省略号。
解决这些问题通常能让
text-overflow正常工作。可以尝试逐步排查，从最简单的
white-space和
overflow开始，然后检查容器宽度和父元素样式。
除了
ellipsis，
text-overflow还有其他值吗？
text-overflow属性主要有两个常用的值：
clip
: 默认值。直接裁剪文本，不显示省略号。ellipsis
: 显示省略号来表示被裁剪的文本。
还有一个不常用的值：
<string>
: CSS Text Module Level 4 引入，允许使用自定义字符串代替省略号。但兼容性较差，不建议在生产环境中使用。
通常情况下，
ellipsis是最常用的值，因为它能清晰地表示文本被截断。
clip适用于不需要任何视觉提示的情况。
在实际应用中，
text-overflow: ellipsis通常配合JavaScript来提供更丰富的交互体验。例如，当用户hover在截断的文本上时，可以通过JavaScript显示完整的文本内容，提供更好的用户体验。
如何用JavaScript增强text-overflow的效果？
JavaScript可以用来增强
text-overflow的效果，特别是在处理多行文本溢出或者需要更好的兼容性时。
一个常见的做法是检测文本是否溢出，然后动态地添加一个提示信息或者提供一个展开按钮。
function checkOverflow(element) {
if (element.offsetWidth < element.scrollWidth) {
// 文本溢出
element.setAttribute('title', element.textContent); // 添加title提示
// 或者添加一个展开按钮
let expandButton = document.createElement('button');
expandButton.textContent = '展开';
expandButton.addEventListener('click', function() {
element.style.whiteSpace = 'normal';
element.style.overflow = 'visible';
expandButton.style.display = 'none';
});
element.parentNode.appendChild(expandButton);
}
}
// 获取所有需要检查的元素
let elements = document.querySelectorAll('.container');
elements.forEach(checkOverflow);这段代码首先定义了一个
checkOverflow函数，用于检测元素中的文本是否溢出。如果溢出，它会添加一个
title属性，当鼠标悬停在元素上时，会显示完整的文本内容。或者，它可以添加一个“展开”按钮，点击后显示完整的文本。
这种方法可以提供更好的用户体验，尤其是在移动设备上，用户可以通过长按或者点击来查看完整的文本内容。
另外，还可以使用一些JavaScript库来处理多行文本溢出，这些库通常提供了更好的兼容性和更多的自定义选项。例如，
Clamp.js是一个流行的库，可以用来处理多行文本溢出，并且提供了丰富的API来控制溢出的行为。
