---恢复内容开始---
word-break|overflow-wrap|word-wrap——CSS英文断句浅析
一 问题引入
今天在再次学习 overflow 属性的时候,查看效果时,看到如下结果,内容在 div 中国换行了,可是两个 P 元素的内容并没有换行,搜索一番没有找到系统的答案,截图到群里请教大神,才知道是英文断句的问题,但是还是不太明白。之前没有遇到这种情况,为了彻底搞清楚,英文断句,又开始学习英文断句到底是怎么回事。
二 换行
每种语言里都有换行,就中文而言,我们最小语言单位是字,字组成词语,在词语换行,不会影响词义,英文的最小语言单位应该是单词,而单词是用字母组成的,字母可拆分,也就是能在单词内换行,而拆分后可能影响单词的意思或者产生歧义,抑或是阅读体验不佳,这是英文换行和中文换行的差异。为了不让阅读者产生歧义,中文换行和平时用中文写作类型,在标点符号的末尾换行,就是标点符号不能在开头,词语可以换行,标点符号通常就是中文句子的断点。
对于内容自适应的盒子,也就是宽度用内容决定的盒子,不存在换行导致歧义的问题,比如浮动盒子。对于固定宽度或者自适应容器的盒子,存在换行导致歧义的问题。
① word-break:normal|keep-all|break-all| (默认为 normal ,还有两个值,用的很少,就不写了)
mdn 解释和翻译:
中文换行是和我们写作一样的规则,我们主要来看书英语和数字,这三者的区别。把一串数字看成一个整体,造了一个不存在的单词 lon.....ng。
实例
HTML
<div id="outbox">
<div class="innerbox">
<h6>word-break:normal</h6>
<p class="p1 "> These some text. lonnnnnnnnnnnnnnnnnng The lines 1234567889123456789 will break at any character character.</p>
</div>
<div class="innerbox">
<h6>word-break:keep-all</h6>
<p class="p2 ">These some text. lonnnnnnnnnnnnnnnnnng The lines 1234567889123456789 will break at any character character.</p>
</div>
<div class="innerbox">
<h6>word-break:break-all</h6>
<p class="p3 ">These some text. lonnnnnnnnnnnnnnnnnng The lines 1234567889123456789 will break at any character character.</p>
</div>
</div>
CSS:
大家共用的 outbox 和 所有p元素:
#outbox {
width: 160px; //外层盒子指定宽度,内部盒子可以适应外部盒子的宽度
border: 1px solid green;
} p {
font-size: 16px;
border: 2px solid red;
padding: 5px;
background: #f29705;
}
p1,p2, p3 的样式:
.p1 {
word-break: normal;
} .p2 {
word-break: keep-all;
} .p3 {
word-break: break-all;
}
效果图:
观察各个属性值得表现,可以看到 word-break 的各种值得区别。
word-break:normal——按照一般的断点断句,可能溢出;
word-break:break-all——content-edge处断句,单词可能被破坏,不会溢出;
word-break:keep-all——断点断句,可能溢出,表现和 word-break:normal 相同。
② overflow-wrap:normal | break-word
MDN 的解释和我的翻译:
例子:
pa pb 的html:
<div id="outbox">
<div class="point ">
<h4>overflow-wrap:normal</h4>
<p class="pa "> These some text. lonnnnnnnnnnnnnnnnnng The lines 1234567889123456789 will break at any character character.</p>
</div>
<div class="point ">
<h4>overflow-wrap:break-word</h4>
<p class="pb ">These some text. lonnnnnnnnnnnnnnnnnng The lines 1234567889123456789 will break at any character character.</p>
</div>
</div>
CSS:
.pa {
overflow-wrap: normal;
} .pb {
overflow-wrap: break-word;
}
效果:
ADAD
观察效果图,可以看出两者的区别:
overflow-wrap:normal——断点断句,单词不被破坏,可能溢出;
overflow-wrap:break-word——先断点,单词过长再在末尾断句,单词可能被破坏,不会溢出。
③ word-wrap: normal | break-word
MDN 的描述和翻译:
HTML:
<div id ="outbox">
<div class="point ">
<h4>word-wrap:normal</h4>
<p class="pA "> These some text. lonnnnnnnnnnnnnnnnnng The lines 1234567889123456789 will break at any character character.</p>
</div>
<div class="point ">
<h4>word-wrap:break-word</h4>
<p class="pB "> These some text. lonnnnnnnnnnnnnnnnnng The lines 1234567889123456789 will break at any character character.</p>
</div>
</div>
pA pB的CSS:
.pA {
word-wrap: normal;
} .pB {
word-wrap: break-word;
}
效果图:
观察效果图,可以看出两者的区别:
word-wrap规定如何断句,
word-wrap:normal——只是断点断句,单词过长就可能溢出;
word-wrap: break-word——先断点断句,单词过长,一行放不下,再在任末尾断句,单词可能被破坏,不会溢出。
---恢复内容结束---