为什么white-space:nowrap可以让文字一行显示?

这篇文章发布于 2021年07月26日,星期一,15:55,归类于 CSS相关。 阅读 20006 次, 今日 12 次 5 条评论

 

鑫空间鑫生活white-space封面

white-space:nowrap可以让文字一行显示,不受外部宽度的限制,大家有没有想过是什么原因呢?

一、空格不换行

‘white space’的中文意思就是空格,因此,white-space:nowrap的意思就是空格不换行。

在Web的默认排版中,空格是换行点。

例如下面这个案例,一段文字描述:

<p>hello zhangxinxu</p>
p {
    width: 6em;
    border: dotted;
}

此时,内容就会在空格处换行,因为空格是换行点。

空格位置换行示意。

此时设置white-space:nowrap让空格不是换行点,那自然内容就一行显示了。

p {
    width: 6em;
    border: dotted;
    white-space: nowrap;
}

截图效果示意:

一行显示示意

然而,实际上,white-space:nowrap不仅仅是让空格不是换行点,似乎让原本可以换行的中文也变得不可以换行了,如下所示:

<p>你好,张鑫旭!</p>
p {
    width: 6em;
    border: dotted;
}

此时换行的位置就是“鑫”这个中文:

鑫可以换行

但是设置white-space:nowrap也一样单行显示了,如下图所示:

中文也单行显示不换行

这岂不是和white-space:nowrap的语义不相符?

二、换行点是空格

实际上,语义是相符的,关键是在Web中,换行符会被解析为空格。

举个例子,在编辑器中有下面这段代码:

<p>2020东京
奥运会</p>

“东京”和“奥运会”中间有个换行符(输入&#x000D;&#x000A;效果类似)。

此时,刷新页面,就会看到,“京”和“奥”之间就会多出了一个普通空格。

如下图所示,空格是可以框选出来的:

换行符会变成空格

所以,当在Web网页中,一段中文发生自然换行的时候,本质上是在换行位置插入了“换行符”。

中文换行示意

而在Web中,换行符会被解析为空格,因此,大家可以理解为上图“鑫”和“旭”之间是有个空格,于是才会自然换行的。

这个时候,是不是就理解white-space:nowrap可以让任意字符单行显示了。

因为web网页中,所有的换行都被解析为空格,而white-space:nowrap的含义就是让空格不换行,因此,一句话中,所有的空格、换行都不再换行,因此,文字内容会一行显示。

这就是white-space:nowrap可以让文字一行显示的原因。

三、其他空格特性三两句

Web中还有一个自动合并空格的特性,也就是连续敲打的空格默认会按照一个空格渲染,例如:

<p>2020东京           奥运会</p>

最后渲染出来的依然只有一个空格:

换行符会变成空格

这个特性也是使用white-space属性进行设置:

  • white-space:pre可以让空格不合并,同时不会换行显示;
  • white-space:pre-wrap可以让空格不合并,同时宽度不足时候可以换行显示;

不过不是本文重点,不展开。

以上就是关于空格的一点小知识,希望对大家的学习有所帮助。

也欢迎转发、分享、点赞。

(本篇完)

分享到:


发表评论(目前5 条评论)

  1. 小乔说道:

    最后一个white-space:pre-wrap是我意外学到的,平时一般都会用全角空格代替

  2. zzzzzzz说道:

    换行参照的是soft wrap opportunity,每个语言的参照都不一样,又学习到一个知识,真好,附上规范地址:https://drafts.csswg.org/css-text/#white-space-property,里面还解释了字母的断字之类的,有需求可以去看看。我也是看了文章才查的。

  3. wdddddd说道:

    inline-block 的幽灵节点和这个「意外」插入的换行符有关系吗?

  4. guahunyo说道:

    学到了学到了

  5. zhangolve说道:

    一楼一楼,学习了。
    看似简单的知识,背后也有些你不知道的细节。