理解浏览器对文本溢出的处理

Clloz · · 611次浏览 ·

前言

最早遇到文本溢出是因为有些链接内容太长,需要缺省展示,就要截断一部分文本用省略号代替,最早对CSS还不是很懂的时候以为是手动写的,后来知道了一些文本溢出的相关属性开始使用,不过也都是看了个大致就直接拿来用了,没有细想那些属性的具体作用和使用场景,今天来谈一谈文本溢出的处理。

什么是文本溢出

首相说一说什么是文本溢出,就是父元素限定了宽度,而文本内容的长度超过了父元素的宽度且不能换行的时候就发了文本溢出,跟这个场景相关的几个属性overflow,text-overflow,white-space,word-break,overflow-wrap。上面我们说到了文本溢出必须是文本所在元素的宽度被限定了,所以文本所在元素必须是一个块级元素,因为行内元素的宽度是由其中的文本内容决定的,并不能用width来进行约束。我们仙来单独理解上面说到的五个属性。

overflow

overflow是溢出的意思,该属性定义了一个元素太大而无法适应块级格式上下文时的渲染方式。他是overflow-xoverflow-y的简写属性,一共有四个属性值:

  1. visible(default):溢出内容不会被修剪,会呈现在元素框外。这就是我们最常看到的我们的元素超出父元素的边界,显示到了父元素外面。
  2. hidden:溢出的内容会被修建,让元素能够适应元素框,不提供滚动条。
  3. scroll:内容会被修剪来适应元素框,浏览器会提供滚动条让用户来查看被修剪的内容,用打印机打印文档的时候,被修剪的内容也会被打印。
  4. auto:由UA决定,当内容不溢出就正常显示,溢出则修剪并显示滚动条。
  5. inherit:从父元素继承该属性。

我们的文本要溢出至少要保证两个条件,就是文本所在元素的宽度要小于文本的宽度并且overflowvisible|hidden,而如果我们要用省略号代替截取文本则属性值只能选择hidden

text-overflow

text-overflow属性指导浏览器如何渲染溢出内容。该属性职工有四个值:

  1. clip(default):该属性告诉浏览器在内容区域的极限处进行截断,也就是内容只能显示到元素框的边界,因此有可能发生一个字符出现一半就被截断的情况,如果要避免这种情况就要在截断处添加空字符串。
  2. ellipsis:该属性值告诉浏览器用一个省略号...来代替被截断的文本,省略号被添加到可见区的末尾,因此可见的文本要缩短一些,如果元素框小到省略号也放不下,那么省略号也会被截断。
  3. string:用任意自定义字符串来表示被截断内容。该属性目前只是个实验性功能,绝大多数浏览器都没有实现该功能,无法使用。

需要注意的一点是,如果文本没有发生溢出并且没有截断,那么该属性是不会生效的,也就是说要使用该属性必须是在文本溢出,并且overflow: hidden;才能起作用,overflow: scroll;虽然也能显示该属性,出现省略号或者截断,但是当text-overflow: ellipsis是,溢出的文本将无法展示,省略号后面的内容被空白符代替。

white-space

white-space属性告诉浏览器如何处理元素中的空白符。该属性有五个值:
1. normal:多个连续空白符会被合并,换行符也会被当作一个空白符来处理。文本会适应元素框进行换行。
2. nowrap:会像normal属性一样合并多个连续空白符,但是文本内的换行无效。
3. pre: 连续空白符会被保留,只有遇到换行符或者<br>才会进行换行。
4. pre-wrap: 连续空白符会被保留,遇到换行符或者<br>会换行,同时在元素框边界也会换行。
5. pre-line:连续空白符会被合并,遇到换行符或者<br>以及元素框边界会换行。

正常情况下,我们需要文本溢出的时候我们会希望文本显示在同一行,因为默认情况下我们的文本到达元素框边界的时候是会自动换行的,所以我们需要white-space: nowrap来约束文本显示在一行。

word-break

word-break属性指导浏览器如何处理文本的换行。该属性有四个值:
1. normal:按默认规则进行换行,对于CJK(中文/日语/韩文)在每个字符之间都可以换行,而对于非CJK则需要在单词结束换行,如果一个单词的长度超过了元素框的宽度,那么该文本将溢出
2. break-all:在任意字符之间都可以换行。
3. keep-all: 对于非CJK语言,按normal规则,对于CJK不换行。
4. keep-word:尽量不在单词中间换行,除非在文本中找不到其他的换行位置(该属性不是所有浏览器都实现了)

white-space: nowrap文本不换行的时候,该属性无效

overflow-wrap

overflow-wrap属性指导浏览器对于特别长的超出元素框宽度的单词是否可以从中间断开换行。有两个属性:
1. normal:不允许断开单词。
2. break-word:当单词过长,元素的宽度不能容纳单词则会在单词内部断开强制换行。

overflow-wrap: break-word时,word-break: keep-all将不会生效,元素依然会从中间断开。可以理解为overflow-wrap的优先级是比word-break高的,再加上white-space: nowrap;属性,优先级为white-space > overflow-wrap > word-break

总结

当我们需要显示缩略文本时,我们要做到这几件事:文本保持在一行,文本长度超出元素宽度,元素不支持滚动条,用省略号代替溢出文本。依次实现代码如下:

.style {
    white-sapce: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Clloz

人生をやり直す

发表评论

电子邮件地址不会被公开。 必填项已用*标注

我不是机器人*

 出现新的回复时用邮件提醒我。

EA PLAYER &

历史记录 [ 注意:部分数据仅限于当前浏览器 ]清空

      00:00/00:00