有跨浏览器的单词换行：溢出换行解决方案吗？

Question

有跨浏览器的单词换行：溢出换行解决方案吗？

css

6

我正在尝试实现以下效果：

但似乎唯一的方法是使用 word-wrap: overflow-wrap，但它并没有得到广泛支持。

所以我唯一的解决方案似乎是使用： word-break: break-all，这将产生以下结果：

注意：第二张图片中的表单是如何破裂的？我需要使用哪些样式来获得第一张图片的结果？

JSFiddle链接：https://jsfiddle.net/jennifergoncalves/k4yn9ucf/

- Jason M

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Aurel Bílý · Accepted Answer

word-wrap（文档）是overflow-wrap的旧名。 word-wrap对于IE（11）、Edge和Opera Mini是必需的。现在，其他主要浏览器都支持overflow-wrap（来源）。此属性可以设置为：

normal - 仅在单词之间断开
break-word - 必要时可以在单词中间断开

与word-break相比，只有在无法将整个单词放置在自己的行上而不溢出时，overflow-wrap才会创建一个换行。

还有另一种属性称为word-break（文档），它控制如何分解单词。接受的值：

normal - 默认
break-all - 在单词的任意两个字符之间中断
keep-all - 对于非CJK（中文/日语/韩语）文本与normal相同

与overflow-wrap相比，word-break会在文本溢出其容器的确切位置创建一个换行（即使将整个单词放在自己的行上也会否定需要换行的必要性）。

因此，似乎有两种选项可以获得正确的换行文本：

overflow-wrap: break-word
word-break: break-all

以下是这两个选项的比较，以及不换行的示例：

p {
  background-color: #009AC7;
  color: #FFFFFF;
  font-size: 18px;
  font-family: sans-serif;
  padding: 10px;
  text-align: justify;
  width: 250px;
}

.wrap1 {
  overflow-wrap: break-word;
}

.wrap2 {
  word-break: break-all;
}

No wrapping:
<p><b>pneumonoultramicroscopicsilicovolcanoconiosis</b> refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano;</p>

<code>word-wrap: normal</code> and <code>word-break: normal</code>
<p class="wrap1"><b>pneumonoultramicroscopicsilicovolcanoconiosis</b> refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano;</p>

<code>word-wrap: normal</code> and <code>word-break: break-all</code>
<p class="wrap2"><b>pneumonoultramicroscopicsilicovolcanoconiosis</b> refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano;</p>

你能看到问题吗？例如，如果你正在使用最新版的 Chrome 浏览器，单词断开点会被随意放置。浏览器无法理解特定语言的连字规则，因此它可以将 from 分成 f-rom 等子串。

幸运的是，有一个叫做 hyphens 的属性（文档链接），可以解决这个问题。将值设置为 auto 就可以让浏览器自动决定何时连字。

连字规则是与语言相关的。在 HTML 中，语言由 lang 属性确定，仅当该属性存在且适当的连字词典可用时，浏览器才会连字。在 XML 中，必须使用 xml:lang 属性。

注意：规定连接连字的具体规则并没有在标准中明确定义，因此不同浏览器的连字效果可能会有所不同。

现在我们来看看它的实际应用：

p {
  background-color: #009AC7;
  color: #FFFFFF;
  font-size: 18px;
  font-family: sans-serif;
  hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  padding: 10px;
  text-align: justify;
  width: 250px;
}

<code>hyphens: auto</code>
<p lang="en-US"><b>pneumonoultramicroscopicsilicovolcanoconiosis</b> refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano;</p>

在最新的Chrome浏览器上，这可以产生很好的效果（尽管文本中的间隙不太美观），符合英语断字规则。不幸的是，对于此属性的支持有些不稳定。Chrome仅在Mac和Android上支持此功能。Safari、IE和Edge需要使用供应商前缀（来源）。如果这对您来说足够好，请使用hyphens。否则，考虑使用替代方案，例如JavaScript自动分音节程序，例如Hyphenator。您的最后选择是使用分音节引擎解析文本并查找所有断词点，然后结合hyphens: manual将它们作为HTML软连字符插入到文本中。