首页 前端知识 CSS word-break 详解

CSS word-break 详解

2024-03-13 00:03:06 前端知识 前端哥 101 317 我要收藏
  1. 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 当文本是一段连续的中文时,超出父元素的宽度会自动换行

  1. 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 当文本是一段连续数字或字母时,超出父元素的宽度会自动换行,浏览器会拆分单词强制换行

  1. 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行宽度时,会自动进行换行

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3702.html
标签
word
评论
发布的文章

JavaScript基础库

2024-04-09 00:04:11

解决vue npm 下载echart出错

2024-04-09 00:04:05

Echarts中option属性设置

2024-04-08 23:04:58

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!