css - 如何解决显示文本完全合理的 Safari 问题？

Question

我在 MacOS/iOS 操作系统的 Safari 浏览器上出现文本显示问题。在选择/取消选择文本之前，文本显示不正确。

与浏览器进行任何交互之前的文本:

在选择过程中:

选择“更正”文本后:

其他浏览器和操作系统在页面加载时正确显示。

使用 BrowserStack，我测试了几个版本的 Safari。直到我测试了 Safari 6.2，它才正确显示。

我不确定原因是什么或解决方案是什么。

该网页是 Angular 5 SPA。

Link to Animated GIF

.newline-to-br {
    white-space: pre-line;
}

<p _ngcontent-c27="" class="newline-to-br">Kids under 10 free. 
If fishing during hunting season, we would recommend wearing blaze orange for safety purposes. </p>

Answer 1

在 Safari 中，文本 block 的末尾不能有空格。实际上添加了空格，但选择可以越过最后一个空白，这就是它换行和对齐的原因。单击或突出显示文本会触发重新绘制，重新解释空间并正确对齐。要修复它，请删除 </p> 之前的最后一个空格.

<p _ngcontent-c27="" class="newline-to-br">Kids under 10 free. 
If fishing during hunting season, we would recommend wearing blaze orange for safety purposes.</p>