文本溢出text-overflow

Posted 蔸蔸猫的博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了文本溢出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中的表现。(中文到边界上的汉字换行,但不允许标点置于段首)

 
技术分享图片

以上是关于文本溢出text-overflow的主要内容,如果未能解决你的问题,请参考以下文章

文本溢出截断省略

如何检测角度控制器中的文本是不是溢出(文本溢出:省略号)

字段集中的溢出和文本溢出

文本溢出显示省略号

超详细的文本溢出添加省略号。。。。

如果文本溢出,则替换文本