避免不自然 word-break

Question

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

这不是很好word-breaking。

如何要求浏览器改为执行“更好”的中断？

示例：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

好吧，你可以完全避免崩溃...

.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>

Answer 2

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

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

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

自动分词有很多问题，通常依赖于浏览器字典(hyhphens can be used) or external scripts. You can also read more about it in another questions like Is it possible to enable auto-hyphenation in HTML/CSS?。

Answer 3

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

The HTML <wbr> element represents a word break opportunity—a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.

.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 上收到一些问题，其中代码不起作用，因为它包含隐藏的零宽度 space。）

避免不自然 word-break

Avoid unnatural word-break

html

css

word-break