How to keep spaces in text in html

In HTML, you can use the white-space attribute to retain spaces in the text. You only need to set the "white-space:pre|pre-line" style in the element. The white-space attribute declares how to handle whitespace characters in elements during the layout process.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Rules for spaces in html

Multiple spaces in content in html are generally regarded as one, and multiple consecutive space characters are automatically merged. At the same time, the spaces before and after the content will also be cleared, as follows:

<p> fly63   com </p>　

The display effect is:

fly63 com　

Note: This mechanism of the browser is also applicable to other than ordinary space keys. Including tab characters (\t) and newline characters (\r and \n), line breaks can be explicitly represented by using the
tag. The white-space attribute sets how whitespace within an element is handled.

This attribute declares how to handle whitespace characters in elements during the layout process. The values ​​pre-wrap and pre-line are new in CSS 2.1.

1. In CSS, when the value of the white-space attribute is pre, it will be processed in the same way as the

 tag. The browser will retain the spaces and line breaks in the text. For example: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><p style="white-space:pre"> fly63  com <p>

Copy after login

The display effect is: ' fly63 com '

2. When the white-space attribute of css is pre-line, it means Line breaks are preserved. Except for the newline character, which will be output as it is, everything else is consistent with the white-space:normal rule.

<p style="white-space: pre-line">
	fly63
	com
</p>

The display effect is:

'fly63

com'

Recommended learning:

html video tutorial

The above is the detailed content of How to keep spaces in text in html. For more information, please follow other related articles on the PHP Chinese website!