是否有跨浏览器自动换行：溢出自动换行解决方案？ [英] Is there cross browser word-wrap: overflow-wrap solution?

问题描述

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

I'm trying to achieve the following effect:

但是似乎唯一的方法是使用 word-wrap：溢出包装，它不受广泛支持。

But it seems like the only way to do this is with word-wrap: overflow-wrap which isn't widely supported.

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

So instead the only solution I seem to have is to use: word-break: break-all which will produce the following results:

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

NOTICE: how the from is broken in the second picture? What styles do I need to use to get the results from the first image?

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

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

推荐答案

自动换行（文档）是溢出包装的旧名称。 IE（11），Edge和Opera Mini需要自动换行。现在，其他主要的浏览器都支持溢出包装（来源）。此属性可以设置为：

word-wrap (documentation) is a legacy name for overflow-wrap. word-wrap is required for IE (11), Edge, and Opera Mini. Other major browsers now all support overflow-wrap (source). This property can be set to:

• 普通-仅在单词之间中断


• 断词-必要时可以在中间断词

• normal - breaks only between words
• break-word - may break words in the middle if necessary

与分词相比，溢出包装仅当无法将整个单词放在自己的行而不会溢出的情况下，才会创建中断。

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.

还有另一个名为<$ c的属性$ c> word-break （文档）来控制单词的拆分方式。可接受的值：

There is another property called word-break (documentation) which control how words are broken. Accepted values:

• 普通-默认


• 全部破解-在单词的任意两个字符之间切换


• 全部保留-等同于非CJK（中文/日文/韩文）文本的普通

• normal - default
• break-all - break between any two characters of a word
• keep-all - identical to normal for non-CJK (Chinese/Japanese/Korean) text

与溢出包装相比，分词会在文本可能溢出其容器的确切位置创建一个中断（即使将整个单词放在自己的行上也不需要中断）。

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

所以似乎有两种选择来正确包装文本：

So it would seem there are two options to get properly wrapped text:

• 溢出-换行：断字


• 断词：全部



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

以下是两者的比较，还有一个无包装的示例：

Here's a comparison of the two, along with a no-wrapping example:

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浏览器，则将分行符放置在任意位置。没有什么可以阻止您的浏览器将从分解为 f-rom 的原因，因为这需要了解该浏览器的连字符规则

Can you see the problem? If you are using the latest Chrome, for example, the word breaks are placed at arbitrary points. There is nothing preventing your browser from breaking from into f-rom because it would need to understand the hyphenation rules for the particular language.

幸运的是，有连字符（文档），它应该可以解决您的问题。值 auto 应该允许浏览器决定何时进行断字。

Fortunately, there is hyphens (documentation) which should solve your problem. The value auto should allow the browser to decide when to hyphenate.

断字规则是特定于语言的。在HTML中，语言由 lang 属性确定，并且只有存在此属性并且有适当的断字词典时，浏览器才会进行断字。在XML中，必须使用 xml：lang 属性。

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.

让我们看看它的实际作用：

Let's see it in action:

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中，这产生了不错的结果（尽管文本中的空白看起来并不令人愉悦），符合英语断字规则。

In the latest Chrome on Mac this produced a nice result (although the gaps in the text are not very pleasant to look at), conforming to the English hyphenation rules.

不幸的是，对该物业的支持有点参差不齐。 Chrome仅在Mac和Android上支持此功能。 Safari，IE和Edge需要供应商前缀（源）。如果这对您足够好，请使用连字符。如果没有，请考虑使用其他解决方案，例如JavaScript自动连字符，例如连字符。您的最后一个选择是使用连字符引擎来解析您的文本并找到所有断点，然后将它们插入为HTML软连字符– & shy; –结合连字符：手动。

Unfortunately, support for this property is a little spotty. Chrome supports this only on Mac and Android. Safari, IE, and Edge require vendor prefixes (source). If this is good enough for you, use hyphens. If not, consider using an alternative solution, such as a JavaScript automatic hyphenator, e.g. Hyphenator. Your last resort would be to use a hyphenation engine to parse your text and find all word-break points, then insert them into your as HTML soft hyphens – ­ – in combination with hyphens: manual.

这篇关于是否有跨浏览器自动换行：溢出自动换行解决方案？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！