在实际应用中,我们经常会遇到本文换行和文本溢出时截取字符串的情况,在理解文本溢出属性之前,我们首先要了解文本换行和空白符这两个属性,然后再学习文本溢出text-overflow属性。
- white-space属性:用来对空格进行处理。
可能的属性值有:
(2)pre:使用pre属性值的时候,空白和换行将会被保留,同时超出容器边缘也不会换行。类似于html中的<pre>标签。
(1)normal:默认属性值,多余的空白会被浏览器忽略掉,只会保留一个空格效果。
(3)nowrap:强制在同一行内显示所有文本,合并文本间的多余空白,直到碰到了换行标签<br />为止。
(4)pre-line:合并空白序列,但保留换行符,IE8以下浏览器不支持此属性。
(5)pre-wrap:保留空白符序列,但是正常进行换行,IE8以下浏览器不支持此属性。
(6)inherit:规定应该从父元素继承white-space属性的值,此属性值在所有的IE版本都不支持。
- 文本换行word-wrap属性:
一个div内,通常希望文字超过div的宽度就会实现自动换行,如果是汉字,那么一切顺利,但如果是连续的英文字符或者数字就会超出容器的边界。但是word-wrap属性则能够实现它的换行功能。
可能的属性值:
(1)normal:默认值,保持浏览器的默认处理,只在允许的断字点换行,也就是非连续的英文字符数字或者汉字可以进行换行。
(2)break-word:此属性值可以实现内容换行,也就是可以实现在边界内换行,不能够超出边界。它不会将单词截断进行换行,要尽可能的保持单词的完整性。table默认状态下并不支持word-wrap:break-word,需要进行一下特殊处理。
- 文本溢出 text-overflow属性
(1)clip:此属性值表示直接裁切,并不显示省略标记(...)。
(2)ellipsis:此属性可以设置当文本溢出时将显示省略标记(...)。
- 我们常用的文本溢出的经典代码为:
- 当存在长英文文本时,text-overflow属性起作用的前提是overflow(或overflow-y或overflow-x):hidden | auto | scroll
- 当文本为汉字时,text-overflow属性起作用的前提是实现汉字不自动换行可使用word-break: keep-all; 或 white-space: nowrap; overflow(或overflow-y或overflow-x):hidden | auto | scroll
- 自动换行word-break属性:
此属性用法与word-wrap属性类似,它具体的属性设置,可以让浏览器实现任意位置的换行。
normal:中文到边界上的汉字换行,英文从整个单词换行keep-all:对于英文长文本不能换行,但对于中文的处理,各浏览器不一致,截图为在chrome中的表现。(在空白符及标点处换行)
break-all: 对于英文长单词来说,会截断单词换行,长单词占据当前行剩余空间。但对于中文的处理,各浏览器不一致,截图为在chrome中的表现。(中文到边界上的汉字换行,但不允许标点置于段首)