避免不自然的断词答案

【问题标题】：Avoid unnatural word-break避免不自然的断词
【发布时间】：2021-08-21 12:02:47
【问题描述】：

我有一个带有长字的<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>

【问题讨论】：

【解决方案1】：

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

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

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

自动分词存在很多问题，这通常取决于浏览器字典（可以使用hyhphens）或外部脚本。您还可以在 Is it possible to enable auto-hyphenation in HTML/CSS? 等其他问题中了解更多信息。

【讨论】：

【解决方案2】：

<wbr> 标签就是为此目的而存在的。

HTML <wbr> 元素代表了一个分词机会——一个文本中浏览器可以选择换行的位置，尽管它的换行规则不会在其他情况下造成中断那个位置。

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

<div class="a">
<h1>Internationali<wbr>sation</h1>
</div>

或者，您也可以在单词中添加zero-width space，但这可能会在尝试复制字符串时导致奇怪的行为。（我们在 Stack Overflow 上遇到了一些问题，其中代码不起作用，因为它包含隐藏的零宽度空间。）

【讨论】：

【解决方案3】：

嗯，你可以完全防止断裂......

.a { width: 260px; background-color: yellow; }
h1 { white-space: nowrap; }

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

或者。在您的内容中设置跨度以表示应该发生中断的位置。这是一个大词，不是两个单独的词，所以浏览器是毫无头绪的，除非你教育它

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

<div class="a">
<h1>International<span>isation</span></h1>
</div>

【讨论】：