css中white-space 属性：“pre”, “pre-line”, “pre-wrap” “nowrap”的区别

在css中white-space属性用来控制容器的文本中带有空白符、制表符、换行符等的显示，取值有：

normal：默认，忽略文本中所有的空白、换行符；只有文本存在 或文本达到框的约束时，文本才会换行
nowrap：和normal类似，忽略文本中所有的空白、换行符；遇到框的宽度约束时不会自动换行，文本只有在有 br 时才会换行
pre：保留文本中的空白、换行符；遇到框的宽度约束时不会自动换行，文本存在 或文本中有换行符时，文本才会换行
pre-wrap：和pre类似，保留文本中的空白、换行符；文本存在 或文本中有换行符时，或者遇到框的宽度约束时，文本都才会换行
pre-line：会略文本中的空白符；文本存在 或文本中有换行符时，或者遇到框的宽度约束时，文本都才会换行

示例：

.container {background-color: lightgreen;width: 300px;
}
.normal {white-space: normal;
}
.no-wrap {white-space: nowrap;
}
.pre {white-space: pre;
}
.pre-line {white-space: pre-line;
}
.pre-wrap {white-space: pre-wrap;
}

html模板：

<div class="container">Lorem         ipsum      dolor sit amet consectetur adipisicing elit.Unde velit       ullam iste labore earum.Nam    ea exercitationem <br> aspernatur <br> ipsum
</div>

1、white-space: normal

white-spaces: normal is the default value. All the source line break, extra white space/tab is collapsed. The text will only break into new line when there is   or if the text hit the constraint of the box.

效果：

2、white-space: nowrap

All the extra spacing/line break is collapsed.
Do not automatically break into new line when hit the width constraint of the box. Text will only break into new line when it has br

效果

3、white-space: pre

Sequences of white space are preserved. Lines are only broken at newline characters in the source and at   elements.

The text do not break into new line even when it hit the width constraint of the box. It will only break into new line if the source has new line or when it has  

效果

4、white-space: pre-wrap

Sequences of white space are preserved. Lines are broken at newline characters, at  , and as necessary to fill line boxes.

pre-wrap is very similar to pre The only differences is the text will automatically break into a new line when it hit the width constraint of the box.

效果

5、white-space: pre-line

Sequences of white space are collapsed. Lines are broken at newline characters, at  , and as necessary to fill line boxes.

Source line break is preserved line break 1 – 6 xtra spacing is collapsed into single spacing. Text will automatically break into new line when hit the width constraint of the box , it has  and the source has new line.

效果

https://medium.com/@tohbansoon/differences-between-pre-pre-line-pre-wrap-and-no-wrap-in-css-1fe4b0f72699

css中white-space 属性：“pre”, “pre-line”, “pre-wrap” “nowrap”的区别相关推荐

stm32中c语言换行符error——expect a declaration warning——“\“followed by white space is not a line splic
标题 stm32中c语言换行符error--expect a declaration warning--""followed by white space is not a lin ...
css text top,text-align属性(css中文本对齐属性)
text-align属性设置h1.h2.h3元素的文本对齐方法: h1{text-align:center} h2{text-align:left} h3{text-align:right} 亲自试 ...
CSS中的resize属性
CSS | 调整属性 (CSS | resize Property) Starting note: 开始说明: We deal with various elements regularly whil ...
html text align属性,CSS中的text-align属性怎么用
CSS的text-align属性可用于设置文本的位置,接下来的这篇文章将给大家介绍关于CSS中的text-align属性的用法,下面我们来看具体的内容. 我们先来看一段简单的代码在此处显示文字效果 ...
CSS中Position定位属性的使用
文章目录 CSS中定位属性的使用 position:absolute position:relative position:fixed position:sticky position:static ...
html页边距为负值,css中的padding属性可以为负值吗？css中padding属性的详解
关于css盒模型中的内边距padding属性的详细介绍,还有新手常犯的一个错误,内边距padding属性真的能写入负值.这个答案在文章的最后,现在就让我们一起来看这篇文章吧首先我们介绍的是第一个问题 ...
【CSS】【position】css中的position属性
css中的position属性用于设置元素位置的确定方式,它有以下几种取值: static:默认定位方式,子元素在父容器中挨个摆放 absolute:绝对定位,元素不占据父容器空间,相当于文档body ...
html scale属性,CSS中的zoom属性和scale属性的用法及区别
CSS中的zoom属性和scale属性的用法及区别 CSS中的zoom属性和scale属性的用法及区别是什么呢?以下是小编整理的相关内容,欢迎阅读学习! zoom 属性语法: zoom:normal ...
c语言中边框所占两列一行,css中的border-collapse属性如何设置表格边框线？（代码示例）...
css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么? border-collapse属性设置表格边框线的方法.有一定 ...
css中文本指什么,CSS中的文本属性
本文总结一下CSS中关于文字的相关属性,最后给出实例. CSS基础文字属性文字的基础属性主要包括:字体.颜色和文本.除去颜色color的属性外,字体和文本的相关属性可以权威参考: CSS 文本属性( ...

css中white-space 属性：“pre”, “pre-line”, “pre-wrap” “nowrap”的区别

css中white-space 属性：“pre”, “pre-line”, “pre-wrap” “nowrap”的区别相关推荐

最新文章

热门文章