文本溢出text-overflow

本文转载于:猿2048网站文本溢出text-overflow

在实际应用中，我们经常会遇到本文换行和文本溢出时截取字符串的情况，在理解文本溢出属性之前，我们首先要了解文本换行和空白符这两个属性，然后再学习文本溢出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：此属性可以设置当文本溢出时将显示省略标记(...)。

• 我们常用的文本溢出的经典代码为：

white-space： nowrap；（强制文本在一行显示） overflow：hidden；（强制文本在一行显示） text-overflow：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中的表现。（中文到边界上的汉字换行，但不允许标点置于段首）

 

转载于:https://my.oschina.net/u/4191619/blog/3098899