我正在尝试实现以下效果:
但似乎唯一的方法是使用 word-wrap: overflow-wrap
,但它并没有得到广泛支持。
所以我唯一的解决方案似乎是使用: word-break: break-all
,这将产生以下结果:
注意:第二张图片中的表单是如何破裂的?我需要使用哪些样式来获得第一张图片的结果?
我正在尝试实现以下效果:
但似乎唯一的方法是使用 word-wrap: overflow-wrap
,但它并没有得到广泛支持。
所以我唯一的解决方案似乎是使用: word-break: break-all
,这将产生以下结果:
注意:第二张图片中的表单是如何破裂的?我需要使用哪些样式来获得第一张图片的结果?
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>
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>
hyphens
。否则,考虑使用替代方案,例如JavaScript自动分音节程序,例如Hyphenator。您的最后选择是使用分音节引擎解析文本并查找所有断词点,然后结合hyphens: manual
将它们作为HTML软连字符­
插入到文本中。