文本溢出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中的表现。（中文到边界上的汉字换行，但不容许标点置于段首）