避免不自然的断字

Question

我有一个<h1>长单词的标题，如下所示。浏览器宽度当然取决于设备，但我注意到在我的一台设备上，它看起来像这样：

这不是一个很好的断词。

如何要求浏览器做“更好”的中断？

示例：Internationali-sation 或 -tion 或 -on 但不是n单独出现在下一行。

这是重现问题的方法（我在260px这里硬编码只是为了重现我在我的设备上看到的内容，但这并不是我的代码中真正硬编码的）：

.a { width: 260px; background-color: yellow; }
h1 { word-wrap: break-word; }

<div class="a">
<h1>Internationalisation</h1>
</div>

Answer 1

您可以手动插入­仅在中断时可见的软连字符。它暗示了浏览器可能会破坏这个词的地方。它类似于<wbr>但带有连字符。像这样的东西：

h1 { word-wrap: break-word; }
.small { width:260px; }

<h1 class="small">Internationali&shy;sation</h1>
<h1>Internationali&shy;sation</h1>

自动分词存在很多问题，这通常取决于浏览器字典（可以使用连字符）或外部脚本。您还可以在另一个问题中阅读更多相关信息，例如是否可以在 HTML/CSS 中启用自动断字？.