移动端长文本截断显示省略号不生效？检查 white-space 属性
text-overflow 属性生效的前提是容器内的文本必须发生溢出，这需要配合 white-space: nowrap 属性强制文本在一行内显示。
检查 white-space 属性是否设置为 nowrap
text-overflow 属性本身不会强制文本换行或产生溢出效果。根据 MDN 的描述，该属性仅设置如何向用户指示隐藏的溢出内容。要使文本溢出容器，必须同时设置 overflow 和 white-space 属性。如果 white-space 的值不是 nowrap，文本会自动换行，导致容器高度增加，从而不会触发溢出状态，省略号也就无法显示。在移动端布局中，如果发现长文本被截断但未显示省略号，首先应检查该元素的 CSS 中是否包含 white-space: nowrap。
在移动端网页开发中，经常遇到列表项或卡片标题过长的情况。如果仅仅设置了 text-overflow: ellipsis，而没有配合 white-space: nowrap，浏览器会根据默认的换行规则处理文本，导致布局错乱。例如，当 white-space 的值为 normal 或 auto 时，文本会在容器宽度达到一定阈值时自动换行。为了确保文本在一行内显示并触发溢出，必须显式地将 white-space 属性设置为 nowrap。这是实现文本截断效果的基础步骤，任何省略号相关的样式都必须建立在这一前提之上。
确认 overflow 属性是否设置为 hidden
除了 white-space 属性，overflow 属性也是触发文本溢出显示的关键。MDN 明确指出，text-overflow 属性不会强制发生溢出，必须通过其他 CSS 属性来使文本溢出其块容器。其中，overflow: hidden 是最常用的设置，它用于隐藏超出容器边界的内容。如果 overflow 的值不是 hidden，即使文本在一行内显示并超出了容器宽度，超出的部分也会被保留显示，而不是被截断。因此，在排查省略号不生效的问题时，必须确认 overflow 属性是否被正确设置为 hidden。
在实际的移动端页面开发中，overflow 属性不仅影响文本溢出的显示，还可能影响整个容器的布局。如果容器设置了 overflow: scroll，虽然文本会被截断，但用户可以通过滚动查看完整内容，这通常不是我们想要的效果。为了确保超出的文本被隐藏并显示省略号，必须将 overflow 设置为 hidden。此外，overflow 属性还决定了容器是否可以处理子元素的溢出。如果容器本身没有设置高度，或者高度由内容决定，那么即使设置了 overflow: hidden，也可能无法正确截断文本。
验证文本是否真正超出了容器宽度
即使同时设置了 white-space: nowrap 和 overflow: hidden，如果文本的长度没有超过容器的宽度，省略号也不会显示。MDN 的示例代码中，容器设置了 width: 200px，而文本内容较长，因此才会触发溢出效果。在移动端开发中，容器的宽度可能受到屏幕尺寸、媒体查询或父容器布局的影响。如果容器宽度足够容纳所有文本，那么文本就不会溢出，text-overflow 属性也就失去了作用。因此，验证文本是否真正超出了容器宽度是排查问题的最后一步。
在移动端调试时，可以使用浏览器开发者工具的元素检查功能，查看容器的实际渲染宽度和文本内容的宽度。如果文本宽度小于容器宽度，那么无论设置了什么省略号样式，都不会生效。此外，还需要注意容器的 padding 和 border 是否占用了部分宽度。如果容器设置了 padding: 2px 5px，那么实际的内容区域宽度会比容器的总宽度小。因此，在计算文本是否溢出时，应该考虑这些因素。只有当文本宽度大于内容区域宽度时，text-overflow 属性才会生效。
检查文本方向是否影响溢出判断
text-overflow 属性的行为受到文本方向的影响。MDN 的示例中展示了左对齐和右对齐文本的不同效果。对于从左到右的文本（LTR），溢出发生在容器的右侧；对于从右到左的文本（RTL），溢出发生在容器的左侧。如果文本方向设置不正确，可能会导致溢出判断出现偏差。例如，如果文本方向被设置为 RTL，但实际内容是英文，那么溢出可能会发生在容器的左侧，导致省略号显示在错误的位置。因此，在移动端开发中，需要根据文本的语言和方向正确设置 direction 属性。
在移动端国际化应用中，文本方向可能根据用户的语言设置动态变化。如果容器没有明确设置 direction 属性，浏览器会根据文本内容的第一个字符自动判断方向。如果文本内容是混合的，可能会导致方向判断不准确。为了确保 text-overflow 属性在所有情况下都能正确工作，应该显式地设置 direction 属性。例如，对于中文文本，可以设置 direction: ltr；对于阿拉伯语文本，可以设置 direction: rtl。这样可以确保溢出判断始终符合预期，省略号也能正确显示。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。