In the daily development process, newline display is a very common application requirement, but it is accidentally discovered that sometimes using "\n" will not display a newline, but will only be recognized as a space, as shown in the figure below.
It can be seen from the above figure that "\n" is recognized as a space display and does not achieve the effect of line break, so how should we achieve line break?
It's actually very simple, we just need to add a style to the text.
style="white-space: pre-wrap;"
It can be seen from this that adding style="white-space: pre-wrap;" to the text can realize text wrapping.
What does white -space: pre-wrap; mean?
In css, the white-space property is used to control the display of blanks, tabs, line breaks, etc. in the text of the container.
- normal: By default, all blanks and line breaks in the text are ignored; only
when the text exists or the text reaches the constraints of the box, the text will wrap. - pre: Preserve the blanks and line breaks in the text; the text will not wrap automatically when encountering the width constraint of the box, and the
text will wrap only when the text exists or there are line breaks in the text. - nowrap: Similar to normal, it ignores all blanks and line breaks in the text; it will not automatically wrap when encountering the width constraint of the box, and the text will only wrap when there is a br.
- pre-wrap: Similar to pre, it retains the blanks and line breaks in the text; the text
will wrap only when the text exists or there are line breaks in the text, or when the width constraint of the box is encountered. - pre-line: ignore blank characters in the text; the text will only
wrap when the text exists or there is a line break in the text, or when the width constraint of the box is encountered.