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

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

但这似乎唯一的方法是使用不受广泛支持的word-wrap: overflow-wrap。

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

注意:在第二张图片中是如何断开的？我需要使用哪种样式来获得第一张图片的结果？

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

最佳答案

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

normal-仅在单词

之间中断

break-word-必要时可以在中间打断单词

还有另一个称为word-break(documentation)的属性，它控制单词的断开方式。接受的值:

normal-默认

break-all-在单词

的任意两个字符之间中断

keep-all-与非CJK(中文/日文/韩文)文字

的normal相同

因此，似乎有两种选择来获取正确包装的文本:

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(documentation)应该可以解决您的问题。值auto应该允许浏览器决定何时连字符。

让我们来看看它的作用:

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软连字符-hyphens: manual-插入。

关于css - 是否有跨浏览器自动换行: overflow-wrap solution?，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38835800/