Question

我正在尝试达到以下效果：

但看起来这样做的唯一方法是使用word-wrap: overflow-wrap而不是广泛支持。

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

注意：第二张照片中的破坏是怎么回事？我需要使用哪些样式来获取第一张图像的结果？

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

Answer 1

word-wrap（documentation）是overflow-wrap的遗留名称。 IE（11），Edge和Opera Mini需要word-wrap。其他主流浏览器现在都支持overflow-wrap（source）。此属性可以设置为：

normal - 仅在单词之间断开
break-word - 如有必要，可能会在中间打断文字

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

还有另一个名为word-break（documentation）的属性，用于控制单词的分解方式。接受的值：

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

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

所以似乎有两种方法可以获得正确包装的文本：

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

这里是两者的比较，以及一个无包装的例子：

＆＃13;

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;
}

＆＃13;

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>

＆＃13;

你能看到问题吗？例如，如果您使用的是最新的Chrome，则会将分词放置在任意位置。没有什么能阻止您的浏览器将from分解为f-rom，因为它需要了解特定语言的连字规则。

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

连字符规则是特定于语言的。在HTML中，语言由lang属性决定，浏览器仅在存在此属性且适当的连字字典可用时才会连字符。在XML中，必须使用xml:lang属性。

注意：规范未明确定义如何执行连字符的规则，因此不同浏览器的确切连字可能会有所不同。

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

在Mac上的最新Chrome浏览器中，这产生了不错的结果（虽然文字中的空白看起来不太令人愉快），符合英文连字规则。

不幸的是，对这个属性的支持有点不稳定。 Chrome仅在Mac和Android上支持此功能。 Safari，IE和Edge需要供应商前缀（source）。如果这对您来说足够好，请使用hyphens。如果没有，请考虑使用替代解决方案，例如JavaScript自动连字符，例如Hyphenator。您的最后一种方法是使用连字引擎来解析您的文本并查找所有断字点，然后将它们插入您的HTML软连字符 -  - 与hyphens: manual结合使用。

是否有跨浏览器自动换行：溢出包装解决方案？

1 个答案: