html - 避免不自然的断词

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>

标签： htmlcssword-break

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 中启用自动连字符？.