css 控制文字换行相关属性

标签: JavaWeb

测试代码:

下面是本文中用于测试三个样式属性展现情况的html代码:

<div id="box">
  Hi&nbsp;&nbsp;,
  This   is a incomprehensibilities long word.
  </br>
  你好&nbsp;&nbsp;,
  这   是一个不可思议的长单词
</div>

现在只给了它一个宽度和边框,没有其它任何样式,下面是它目前的展现情况:

可以看到, &nbsp; 和 </br> 可以正常发挥作用,而连续的空格会被缩减成一个(比如This和is之间的三个空格变成了一个),换行符也全都无效。句子超过一行后会自动换行,而长度超过一行的单个单词会超出边界。
接下来我们看下, 给它上面三个css属性赋值后会出现什么变化。

 

white-space 属性

white-space 属性指定元素内的空白怎样处理。

描述
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

为了方便比较,下文所有图,左侧为 normal 即初始情况,右侧为赋上相应值时的情况:

white-space:nowrap

不仅空格被合并,换行符无效,连原本的自动换行都没了!只有 </br> 才能导致换行!所以这个值的表现还是挺简单的,我们可以理解为永不换行。

white-space:pre

空格和换行符全都被保留了下来!不过自动换行还是没了。保留,所以 pre 其实是 preserve 的缩写,这样就好记了。

white-space:pre-wrap

显然 pre-wrap 就是 preserve+wrap,保留空格和换行符,且可以自动换行。

white-space:pre-line

空格被合并了,但是换行符可以发挥作用,line 应该是 new line 的意思,自动换行还在,所以 pre-line 其实是 preserve + new line+wrap。

总结:

属性 换行符 空格 自动换行 </br>、nbsp;
normal × ×(合并)
nowrap × ×(合并) ×
pre ×
pre-wrap
pre-line ×(合并)

 

word-break

word-break属性指定非CJK脚本的断行规则。

提示:CJK脚本是中国,日本和韩国("中日韩")脚本。

语法

word-break: normal | break-all | keep-all;

描述
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。

word-break:keep-all

所有“单词”一律不拆分换行,注意,我这里的“单词”包括连续的中文字符(还有日文、韩文等),或者可以理解为只有空格可以触发自动换行

word-break:break-all

所有单词碰到边界一律拆分换行,不管你是incomprehensibilities这样一行都显示不下的单词,还是long这样很短的单词,只要碰到边界,都会被强制拆分换行。

 

word-wrap(overflow-wrap)

word-wrap 属性原本属于微软的一个私有属性,在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。

这个属性也是控制单词如何被拆分换行的,实际上是作为word-break的互补,它只有两个值:normal | break-word,那我们看下break-word:

语法

word-wrap: normal | break-word;

描述
normal 只在允许的断字点换行(浏览器保持默认处理)。
break-word 在长单词或 URL 地址内部进行换行。

word-wrap:break-all

只有当一个单词一整行都显示不下时,才会拆分换行该单词。

总结:

最后总结一下三个属性

  • white-space,控制空白字符的显示,同时还能控制是否自动换行。它有五个值:normal | nowrap | pre | pre-wrap | pre-line
  • word-break,控制单词如何被拆分换行。它有三个值:normal | break-all | keep-all
  • word-wrap(overflow-wrap)控制长度超过一行的单词是否被拆分换行,是word-break的补充,它有两个值:normal | break-word

 

 

span 文本内容换行完整样式

<span style="
    width:200px;
    display:inline-block;
    word-break:break-all;
    word-wrap: break-word;
    white-space:normal">
</span>

因为 span 不是块状元素,本身自带有 左浮动的效果,并且连续的英文字母跟数字是没办法自动换行的必须要强制换行。但是光用word-wrap:break-word; 是不行的。必须要在限制了宽度的情况下还要增加 white-space:normal 属性

 

 

版权声明:本文为qq_33800083原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_33800083/article/details/105783866