Javascript span标记中的最后一个文本在safari版本10.0.2中被剪切

Safari版本10.0.2上的问题，在鼠标上，我更改span标记中文本的颜色，但span不覆盖整个文本，句子中的最后一个字母被剪切，因此颜色不应用于最后一个字母。如果我删除了单词空间，问题就解决了

你知道为什么这不能像我预期的那样起作用吗

在此处输入代码

<div id="mainDiv">
            <span>The best preparation for tomorrow is doing your best today.</span>
</div>

为明天做最好的准备就是今天做到最好。

---

为span标记添加显示属性

span{display: block; width: 100%}

---

在safari for windows 5.1.7上不可用。我不想更改HTML结构，它在Mac OS safari上不起作用。我在Mac OS 10.12上使用safari 10.1，无法重现此问题。这似乎是Safari 10.0.2中的一个bug，谢谢您的回复。你们能检查一下更新的JSFIDLE链接吗？这个问题是由于单词间距引起的，但我需要保持示例中给出的单词间距不变。谢谢你的回复。你能检查一下这个更新的JSFIDLE链接吗？如果我必须遵循给定的结构，则显示：block；不起作用。如果您想更改所有span的颜色，为什么不尝试在#mainDiv

#mainDiv:hover span{color:red}

上添加悬停效果？我想在鼠标悬停时更改文本的颜色，这就是问题发生的原因。谢谢您的回复！请检查更新的JSFIDLE链接，以便您能够了解有关safari 10.0.2上的问题的想法。