This article said white-space CSS property is a blank line feed and process control. I used to be sick of this property, has not remember, today decided to write down pondering the next.
Property Value
normal
The default value , normal line breaks, blanks and line breaks will be ignored by the browser. What does it mean?
Wrap the normal mean, normally between words will wrap, if the next word is too long, not enough to complete the remainder of the show in the current line, the next line will be displayed. What circumstances be considered a word of it?
In a word
a word of English
// 这是两个单词
Tusi Blog
// 这只算一个单词
TusiBlog
Sequential numbers or symbols only a word count
// 这只算一个单词，如果超长也不会换行，会挤出横向滚动条
10000000000000000000000+2000000000000000000*200000000000000
Blank and newline will be ignored by the browser. Your input is continuous spaces, only to show the effect of a space; if knock Enter, it will not wrap.
<!-- 代码 -->
<div>00000000 00000000000000000></div>
<!-- 实际效果 -->
00000000 00000000000000000
pre
Behavior similar to pre tag in HTML. pre generally used to wrap the label source.
It will not wrap (think about it, when you write code, no carriage return will wrap it?), Except when line breaks in the text (knock Enter) or use the br tag.
White space is reserved browser. Meaning that consecutive spaces will be preserved, it will not be merged into one.
nowrap
- Does not wrap, more content is not wrapped.
- Ignore line feeds, carriage returns means that it will not wrap until it encounters br tags so far.
pre-wrap
- Normal wrap
- Consecutive whitespace will be preserved
- Newline (carriage return) is also effective
pre-line
- Normal wrap
- Continuous whitespace will be combined into one
- Newline (carriage return) is also effective
inherit
Inherit the parent element of white-space property values
Programming sixth year, to share with you some of the learning method, combat development need to pay attention to detail. 767-273-102 autumn dress. From the zero-based front-end to learn how to start. To see how the predecessors proudly forward in the programming world! Constantly updated with the latest tutorials and learning methods (web front-end system to learn the route, detailed front-end project combat instructional videos), I had wanted to learn web front-end, or change jobs, or college students, as well as work want to upgrade their skills, is studying small partners are welcome to join. We will walk together with the front tip of the tip
to sum up
You can compare the differences between these attribute values from several aspects.
| Normal wrap | Whether to merge consecutive whitespace | Newline is valid | |
|---|---|---|---|
| normal | Yes | Yes | no |
| pre | no | no | Yes |
| nowrap | no | Yes | no |
| pre-wrap | Yes | no | Yes |
| pre-line | Yes | Yes | Yes |