css - 是否有跨浏览器自动换行: overflow-wrap solution?

Question

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

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

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

注意:第二张图片中的 from 是如何损坏的？我需要使用什么样式才能从第一张图片中获得结果？

JSFiddle:https://jsfiddle.net/jennifergoncalves/k4yn9ucf/

Answer 1

word-wrap ( documentation ) 是 overflow-wrap 的旧名称。 word-wrap 是 IE (11)、Edge 和 Opera Mini 所必需的。其他主要浏览器现在都支持 overflow-wrap ( source )。该属性可以设置为:

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

In contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing.

还有一个名为 word-break ( documentation ) 的属性，它控制单词的拆分方式。接受的值:

• 正常 - 默认
• break-all - 在单词的任意两个字符之间打断
• keep-all - 与非 CJK(中文/日文/韩文)文本的 normal 相同

In contrast to overflow-wrap, word-break will create a break at the exact place where text would otherwise overflow its container (even if putting an entire word on its own line would negate the need for a break).

所以似乎有两种选择可以正确包装文本:

• overflow-wrap: break-word
• 分词: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，因为它需要了解特定语言的连字符规则。

幸运的是，连字符 ( documentation ) 应该可以解决您的问题。值 auto 应该允许浏览器决定何时断字。

Hyphenation rules are language-specific. In HTML, the language is determined by the lang attribute, and browsers will hyphenate only if this attribute is present and if an appropriate hyphenation dictionary is available. In XML, the xml:lang attribute must be used.

Note: The rules defining how hyphenation is performed are not explicitly defined by the specification, so the exact hyphenation may vary from browser to browser.

让我们看看它的实际效果:

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>

在 Mac 上最新的 Chrome 中，这产生了一个不错的结果(尽管文本中的空白看起来不太舒服)，符合英文断字规则。

不幸的是，对该属性的支持有点参差不齐。 Chrome 仅在 Mac 和 Android 上支持此功能。 Safari、IE 和 Edge 需要供应商前缀 ( source )。如果这对您来说足够好，请使用 hyphens。如果没有，请考虑使用替代解决方案，例如 JavaScript 自动连字符，例如Hyphenator .您最后的选择是使用断字引擎来解析您的文本并找到所有断字点，然后将它们插入您的 HTML 软连字符 - ­ - 与 连字符组合:手册。