移动端网页长文本溢出为何不显示省略号？
text-overflow 属性仅对溢出内容生效，必须配合 overflow 和 white-space 属性使用。
检查是否同时设置了 overflow 和 white-space 属性
text-overflow 属性本身不会强制文本溢出容器，它只是设定溢出内容的显示方式。要触发溢出效果，必须先让文本超出容器的宽度。这通常通过设置 white-space: nowrap 来实现，该属性禁止文本换行。同时，必须设置 overflow: hidden 来隐藏超出容器的内容。只有当 overflow 属性的值为 hidden、scroll 或 auto 时，text-overflow 才会生效。
如果只设置了 text-overflow: ellipsis 而没有设置 overflow: hidden，文本会正常换行显示，不会出现省略号。同样，如果只设置了 white-space: nowrap 但没有设置 overflow，文本会撑开容器宽度。因此，在排查问题时，应首先检查 CSS 中是否同时存在这三个属性。缺少任何一个属性，省略号效果都不会出现。
确认容器宽度是否限制了文本显示范围
即使设置了 white-space: nowrap 和 overflow: hidden，如果容器的宽度足够大，文本也不会溢出。text-overflow 仅影响在 inline progression 方向上溢出的内容。这意味着对于从左到右的文本，它只影响右侧溢出的部分。如果容器宽度设置为 100%，文本可能会填满整个屏幕，从而不会触发溢出条件。
可以通过检查容器的 width 属性来确认。如果容器宽度设置为 auto 或未设置，且父元素没有限制宽度，文本将不会溢出。为了测试效果，通常需要给容器设置一个具体的宽度值，例如 width: 200px。只有当文本长度超过这个宽度时，text-overflow 属性才会开始工作。
验证文本方向是否影响省略号显示位置
text-overflow 属性可以接受一个或两个值。如果只提供一个值，它指定的是文本行末尾的溢出行为。对于从左到右的文本，省略号显示在右侧；对于从右到左的文本，省略号显示在左侧。如果提供了两个值，第一个值控制行首的溢出行为，第二个值控制行尾的溢出行为。例如，text-overflow: ellipsis ellipsis 表示两端都显示省略号。
在移动端网页中，如果设置了 direction: rtl，文本将从右向左排列。此时，如果只设置了一个值，省略号将出现在左侧。如果需要两端都显示省略号，必须使用两个值。检查时，应确认文本方向与省略号显示位置是否符合预期。
检查是否对可编辑元素应用了省略号样式
当 text-overflow: ellipsis 应用于可编辑元素，如文本输入框或带有 contenteditable 属性的段落时，浏览器通常会将其视为 text-overflow: clip。这是为了确保用户可以编辑文本，即使文本被省略号覆盖。在移动端，输入框和文本域是常见的可编辑元素。如果发现输入框中的文本没有显示省略号，可能是因为浏览器将其视为可编辑元素。
可以通过尝试编辑文本内容来验证这一点。如果文本可以正常编辑，说明浏览器确实将其视为可编辑元素。在这种情况下，省略号效果可能不会显示，或者只在元素未聚焦时显示。这是浏览器的默认行为，旨在保证用户输入的可用性。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。