移动端长文本溢出容器为何不显示省略号？检查 text-overflow 属性
移动端网页长文本溢出容器时不显示省略号，通常是因为未正确设置 text-overflow 属性。
确认容器宽度与文本换行设置
在移动端网页中，长文本溢出容器不显示省略号，首先需要检查容器的宽度是否限制了文本显示范围。如果容器宽度足够大，文本会自动换行，不会产生溢出效果。因此，必须确保容器的宽度小于文本内容的宽度，或者通过 CSS 属性强制文本不换行。例如，设置容器的宽度为固定值或百分比，并确保文本内容超出该宽度。
为了强制文本不换行，需要使用 white-space: nowrap 属性。该属性会阻止文本在空格或换行符处断开，使所有文本在一行内显示。如果未设置此属性，即使设置了 text-overflow，文本也会因为换行而不会溢出容器，从而导致省略号无法显示。因此，检查 white-space 属性是否设置为 nowrap 是排查的第一步。
检查 overflow 属性是否设置为 hidden
除了 white-space 属性，overflow 属性的设置同样关键。text-overflow 属性本身不会强制内容溢出容器，它只是定义了当内容溢出时如何向用户显示。因此，必须设置 overflow: hidden 来隐藏溢出的内容。如果 overflow 属性未设置为 hidden，溢出的文本仍然会显示在容器之外，省略号也就无法生效。
在移动端网页开发中，overflow 属性通常与 text-overflow 和 white-space 属性配合使用。例如，设置 overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 可以实现文本溢出时显示省略号的效果。如果只设置了 text-overflow 而未设置 overflow: hidden，文本溢出后仍然可见，省略号不会出现。
验证 text-overflow 属性的具体值
text-overflow 属性有三个主要值：clip、ellipsis 和字符串。clip 是默认值，它会直接裁剪溢出的文本，不显示任何标记。ellipsis 值会在溢出的文本末尾显示省略号（…），这是最常见的用法。字符串值则允许开发者自定义溢出时显示的文本，例如显示“[更多]”。如果 text-overflow 属性未设置或设置为 clip，溢出的文本将被直接裁剪，不会显示省略号。
在移动端网页中，通常推荐使用 text-overflow: ellipsis 来提升用户体验。如果需要自定义显示文本，可以使用 text-overflow: ' [..]' 这样的字符串值。需要注意的是，text-overflow 属性只影响内容在 inline progression direction（文本流动方向）上的溢出，例如从左到右文本的右侧溢出，或从右到左文本的左侧溢出。
测试不同文本方向下的显示效果
text-overflow 属性在处理从右到左（RTL）文本时，行为与从左到右（LTR）文本略有不同。对于 RTL 文本，text-overflow 的第一个值控制左侧溢出，第二个值控制右侧溢出。例如，设置 text-overflow: ellipsis ' [..]' 会在 RTL 文本的左侧显示省略号，右侧显示自定义字符串。如果未正确设置方向属性，可能会导致省略号显示位置错误。
在移动端网页中，可以通过设置 direction: rtl 来测试 RTL 文本的溢出效果。如果文本方向设置为 RTL，但 text-overflow 属性未正确配置，可能会导致省略号显示在错误的一侧。因此，在排查问题时，需要同时检查文本方向和 text-overflow 属性的配置，确保两者一致。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。