android - HTML CSS 文本的最后一个字符开始一个新行

Question

我遇到了一个问题，我需要一个 div 来根据其中的文本增长。文本来自用户的输入，因此它是动态的并且可以包含新行。总结一下:

• div 不能有 width:100%
• 如果单词很长，必须换行
• 文本可能包含新行

一个简单的 white-space: pre-wrap; 和 word-break: break-word; 在大多数情况下都可以解决问题，但问题在于某些字体(我使用的是 ionic，因此 android 使用“Noto Sans Hebrew”)最后一个字符另起一行。

我能够缩小问题范围并创建 this pen

我猜这可能是某些字符的意外宽度，任何人都可以想到修复或解决方法吗？

Answer 1

对于您提供的这支特定笔，删除 white-space: pre-wrap; 或 word-break: break-word; 解决了这个问题，因为它们中的每一个都取消了彼此的影响。但是，我建议删除您的 white-space: pre-wrap。

保留 white-space: pre-wrap 就好像我们在说“让所有内容都像 white-space: normal 一样，但一定要保留空白从字面意义上的 HTML"根据 MDN specs :

Sequences of white space are preserved. Lines are broken at newline characters, at "br" tags, and as necessary to fill line boxes.