CSS 空白属性

white-space是一个 CSS 属性,可帮助控制如何处理元素文本中的空格和换行符。

白色空间属性可以使用这些值:

  • 正常:默认值。多个空格合并为一个。文本在需要时换行到下一行。
  • nowrap:多个空格合并为一个,但文本不会换行到下一行。我们已经讨论了如何使用 nowrap 值来防止换行。
  • pre:与使用<pre>相同的结果,其中所有空格将保持原样,并且文本仅在内容中有换行符时换行。
  • pre-line:多个空格合并为一个,文本在需要时换行或在内容中换行。
  • pre-wrap:类似于pre,但文本也会在需要时换行。

空白:正常

Medusafish 带状鳉鱼定罪 blenny 秋刀鱼线鲟。印度 mul mora cisco masu 三文鱼、公鸡鱼安魂曲鲨鱼长鼻刺刀鱼蓝鱼红鲷鱼萨克拉门托分裂尾巨型丹尼

空白:nowrap

Medusafish 带状鳉鱼定罪 blenny 秋刀鱼线鲟。印度 mul mora cisco masu 三文鱼、公鸡鱼安魂曲鲨鱼长鼻刺刀鱼蓝鱼红鲷鱼萨克拉门托分裂尾巨型丹尼

空白:预

在这里,我手动包含了换行符和额外的空格。注意开头的额外换行符。那是因为在标记中,文本从<p>元素之后的行开始


Medusafish 带状鳉鱼定罪 blenny 秋刀鱼线鲟。
印度 mul mora cisco masu 三文鱼、公鸡鱼安魂曲鲨鱼长鼻柳叶刀鱼蓝鱼红色


鲷鱼萨克拉门托分裂尾巨型 danio。

前线

此处文本在需要时中断,但我也手动中断了最后几个单词。我包含了相同的额外空格,但它们现在已折叠。

Medusafish 带状鳉鱼定罪 blenny 秋刀鱼线鲟。印度 mul mora cisco masu 三文鱼、公鸡鱼安魂曲鲨鱼长鼻刺刀鱼蓝鱼红鲷鱼萨克拉门托分裂尾巨型丹尼

预包装

现在额外的空格不会折叠。

Medusafish 带状鳉鱼定罪 blenny 秋刀鱼线鲟。印度 mul mora cisco masu 三文鱼、公鸡鱼安魂曲鲨鱼长鼻刺刀鱼蓝鱼红鲷鱼萨克拉门托分裂尾巨型丹尼

觉得文章有用?

点个广告表达一下你的爱意吧 !😁