HTML CSS文本的最后一个字符开始换行

时间:2019-04-12 12:15:44

标签: android html css ionic-framework

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

  • div不得包含width:100%
  • 如果单词很长,必须将文本换行
  • 文本可能包含换行符

在大多数情况下,简单的white-space: pre-wrap;word-break: break-word;可以解决问题,但是问题在于某些字体(我使用离子字体,因此android使用'Noto Sans Hebrew'),最后一个字符开始新行。

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

我想这可能是某些字符的意外宽度,任何人都可以想到解决方法或解决方法吗?

2 个答案:

答案 0 :(得分:0)

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

保留white-space: pre-wrap就像我们说的是“保留white-space: normal中的所有内容,但要确保字面上的空白完全来自HTML” 根据{{​​3}}:

  

保留空白序列。行在换行符,“ br”标签处以及根据需要填充行框时被打断。

答案 1 :(得分:0)

事实证明,使用特定字体存在问题。不知何故,字符的宽度无法正确计算,大多数句子的宽度最终超出了所需的宽度。

将字体更改为OpenSans Hebrew(外观相同)对我来说解决了这个问题