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

Question

我在 MacOS/iOS 操作系统的 Safari 浏览器上遇到了文本显示问题。文本显示不正确，直到文本为 selected/deselected。

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

选择过程中：

选择后有"corrected"文字：

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

使用 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 中，文本块的末尾不能有白色 space。 Space 实际上已添加，但选择可以超过最后一个白色 space，这就是它换行和对齐的原因。单击或突出显示文本会触发重新绘制，重新解释 space 并正确对齐。要修复它，请删除 </p>.

之前的最后一个 space

<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>

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

How to resolve this Safari issue of displaying text fully justified?

css

safari

cross-browser

mobile-safari

angular5