脚本宝典收集整理的这篇文章主要介绍了CSS之换行——work-break 和 wrod-wrap,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
在CSS样式中如何换行?我们看到了 work-break 和 wrod-wrap属性。它们有什么区别和联系?
| word-break | wrod-wrap |
默认值 | normal | |
继承性 | yes | |
版本 | CSS3 | |
JavaScript语法 | object.style.wordBreak="keep-all" | object.style.wordWrap="break-word" |
表格中的数字注明了完全支持该属性的首个浏览器版本。
浏览器 | Chrome | IE | FireFox | Safari | opera |
word-break | 4.0 | 5.5 | 15.0 | 3.1 | 15.5 |
wrod-wrap | 4.0 | 5.5 | 3.5 | 3.1 | 10.5 |
word-break的语法及参数如下:
word-break: normal|break-all|keep-all;
值 | 描述 |
normal | 使用浏览器的默认换行规则。 |
break-all | 允许在单词内换行 |
keep-all | 只能在半空格或连字符处换行。 |
wrod-wrap的语法及参数如下:
word-wrap: normal|break-word;
值 | 描述 |
normal | 只在允许的断字点换行(浏览器保持默认处理)。 |
break-word | 允许长单词或者URL 地址内部进行换行。 |
分别设置work-bread属性值为break-all 、keep-all和word-wrap的值为break-wrod。
1 p.break-all { 2 width: 100px; 3 border: 1px solid #000000; 4 word-break: break-all; 5 } 6 7 p.keep-all { 8 width: 100px; 9 border: 1px solid #000000; 10 word-break: keep-all; 11 } 12 13 p.break-word { 14 width: 100px; 15 border: 1px solid #000000; 16 word-wrap: break-word; 17 }
分别设置3个包含相同长字符的段落。
1 <p class="break-all">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p> 2 <p class="keep-all">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p> 3 <p class="break-word">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
他们的显示值如下:
@H_8_360@
可以发现
以上是脚本宝典为你收集整理的CSS之换行——work-break 和 wrod-wrap全部内容,希望文章能够帮你解决CSS之换行——work-break 和 wrod-wrap所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。