CSS之换行——work-break 和 wrod-wrap

发布时间:2022-07-05 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了CSS之换行——work-break 和 wrod-wrap脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

在CSS样式中如何换行?我们看到了 work-break 和 wrod-wrap属性。它们有什么区别和联系?

定义和用法

  • word-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@

 可以发现

  •  word-break: break-all; l很自然的截断长字符;
  •  word-break: keep-all;在空格或半角/全角字符时才截断;
  •  word-wrap: break-word; 会优先不让字符串截断(如果字符串很长,也不得不换行)。

参考网址

  • CSS word-break: https://www.w3school.COM.cn/cssref/PR_word-break.asp
  • CSS word-wrap 属性:https://www.w3school.com.cn/cssref/pr_word-wrap.asp

脚本宝典总结

以上是脚本宝典为你收集整理的CSS之换行——work-break 和 wrod-wrap全部内容,希望文章能够帮你解决CSS之换行——work-break 和 wrod-wrap所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。