在行尾划掉单词 - 仅限于Safari

Question

我正在创建一个关于Red October（位于http://dragonmath.net/summer_project_2016/summary/）的夏季项目的简短且相对简单的网站。该网站不完整（缺少内容，图片，还没有完全响应），但在我完成之前，我想修复一个错误。该网站在除Safari之外的所有浏览器中都很好。当Safari的宽度超过1242像素时，线末端的一些单词会被切断。

最初我认为它可能是问题的字体，但是一点点的测试表明这些单词被许多字体切断了，我尝试了所有字体。另一个有趣的观点是，有些词语会延伸到切断词语被切断的地方。这让我相信它不可能与元素的width有关，但我不确定。

我还注意到Safari中的网站似乎更宽，(min-width)标记中的@media在Chrome中可以更小，但在Safari中必须更宽。我不知道这是否有助于仅在Safari中被切断的单词，但我认为这可能有助于更彻底地解释问题。

我发现了其他几篇看似相似问题的文章，但没有一条建议的修复方法帮助解决了我的问题。

This question和this article都处理overflow或text-overflow这两项都没有解决我的问题。我网站上的css中仍有overflow: visible。

来自this question的网站已不在所提供的链接中，但我认为答案的更改是添加width: 100%;。我试过了，但它对被截断的文本没有任何影响。 This MacRumors article似乎对此问题提供了类似的答案（在这种情况下更改为height: 100%;）。本文还提到了这样一个事实：Safari中的文本没有被切断<（与我所发现的相反）。

我已经尝试过谷歌搜索一切可能的方式来解决我能想到的问题，但一切都没有发现。由于任何可能发生这种情况的原因，我还广泛搜索了Stack Overflow。虽然很难创建一段重新创建问题的短代码（因为问题只发生在Safari中），但下面是应该导致问题的所有html和css。我的网页的完整代码可以在http://dragonmath.net/summer_project_2016/summary/

找到

＆＃13;

＆＃13;

.mainSection {
	display: block;
	height: auto;
	width: 100%;
}

.sectionContentContainer {
	display: inline-block;
	margin-top: 40px;
	margin-left: 40px;
	width: 560px;
	overflow: visible;
}

.sectionParagraph {
	font-weight: 400px;
	font-size: 20px;
	width: 100%;
	margin-top: 40px;
	word-spacing: 10px;
}

＆＃13;

<section class="mainSection">
  <div class="sectionContentContainer">
    <p class="sectionParagraph">The content goes here, but sometimes when the content stretches onto multiple lines, it cuts off random words in Safari.</p>
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;

据我所知，这就是可能影响文本的所有CSS。仅为背景，文本旁边有一个图像，图像和文本被<main>标记包围。主要设置为min-height: calc(100% - 160px; height: auto; width: 100%;

以下是发生的事情的一些图像：

任何帮助都会很棒（如果需要澄清，请在评论中提问）。