- word-break:normal 使用浏览器默认的换行规则
<!DOCTYPE html>
<html>
<head>
<style>
p.test1
{
width:11em;
border:1px solid #000000;
word-break:normal;
}
</style>
</head>
<body>
<p class="test1">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<p class="test1">12312312312312312344444 21312312312312vvvvvvvv</p>
<p class="test1">文本,是指书面语言的表现形式,从文学角度说,通常是具有完整、系统含义(Message)的一个句子或多个句子的组合。一个文本可以是一个句子(Sentence)、一个段落(Paragraph)或者一个篇章(Discourse)。广义“文本”:任何由书写所固定下来的任何话语。(利科尔) 狭义“文本”:由语言文字组成的文学实体,代指“作品”,相对于作者、世界构成一个独立、自足的系统。</p>
</body>
</html>
1-1 效果图
1-2 当文本是一段连续数字或字母时,超出父元素的宽度不会自动换行,直到遇到空格才会换行
1-3 当文本是一段连续的中文时,超出父元素的宽度会自动换行
- word-break:break-all 允许在单词内换行。
<!DOCTYPE html>
<html>
<head>
<style>
p.test1
{
width:11em;
border:1px solid #000000;
word-break:break-all;
}
</style>
</head>
<body>
<p class="test1">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<p class="test1">12312312312312312344444 21312312312312vvvvvvvv ddddddddddddddddddddddddddddd</p>
<p class="test1">文本,是指书面语言的表现形式,从文学角度说,通常是具有完整、系统含义(Message)的一个句子或多个句子的组合。一个文本可以是一个句子(Sentence)、一个段落(Paragraph)或者一个篇章(Discourse)。广义“文本”:任何由书写所固定下来的任何话语。(利科尔) 狭义“文本”:由语言文字组成的文学实体,代指“作品”,相对于作者、世界构成一个独立、自足的系统。</p>
</body>
</html>
2-1 效果图
2-2 当文本是一段连续数字或字母时,超出父元素的宽度会自动换行,浏览器会拆分单词强制换行
- keep-all 只能在半角空格或连字符处换行。
<!DOCTYPE html>
<html>
<head>
<style>
p.test1
{
width:11em;
border:1px solid #000000;
word-break:keep-all;
}
</style>
</head>
<body>
<p class="test1">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<p class="test1">12312312312 3123 12344444 21312312312312 ddddddddddddddddddddddddddddd</p>
<p class="test1">文本,是指书面语言的表现形式,从文学角度说,通常是具有完整、系统含义(Message)的一个句子或多个句子的组合。一个文本可以是一个句子(Sentence)、一个段落(Paragraph)或者一个篇章(Discourse)。广义“文本”:任何由书写所固定下来的任何话语。(利科尔) 狭义“文本”:由语言文字组成的文学实体,代指“作品”,相对于作者、世界构成一个独立、自足的系统。</p>
</body>
</html>
3-1 效果图
总结:
1-1 当是字母或数字时,当前行字符遇到空格,并且下一个单词长度 + 当前行的长度 > 1行宽度时,会自动进行换行
1-2 当前文本是汉字时,遇到标点符号(逗号、顿号、分号、冒号等等),并且下一句汉字的长度 + 当前行的长度 > 1行宽度时,会自动进行换行