Line break
1.<br> Tags
This is the most straightforward way to insert a simple line break into the text.<br>A tag is an empty element, meaning it does not require an end tag.
Example:
<p>This is the first line。<br>This is the second line。</p>
2. CSS white-space attribute
Through the white-space attribute of CSS, you can control how whitespace characters are processed in elements. For example, setting white-space to pre or pre-wrap can preserve line breaks and spaces in text
Example:
<p style="white-space: pre-wrap;">This is the first line。 This is the second line。</p>
3. <p>, <div> and other block-level elements
Take advantage of HTML block-level elements (e.g.<p>、<div>etc.) to separate text blocks naturally, these elements will generate line breaks before and after them by default.
Example:
<p>This is the first paragraph。</p> <p>This is the second paragraph。</p>
4. Line break character \n
In JavaScript strings, you can use \n to represent line breaks. This newline will be correctly parsed as a newline in most cases, but the effect depends on how you present the string (for example, it may not work directly in HTML, because the newline will be ignored).
Example:
var text = "This is the first line.\nThis is the second line."; (text); // You will see two lines of text in the console
Spaces
1、’ ’
There are so many spaces in the output content, and the result of display seems to be only one space; this is because the browser display mechanism displays multiple spaces manually tapped into it to display multiple spaces into 1 space.
Solution:("<span style=' white-space:pre;'>"+" 1 2 3 "+"</span>");Results: 1 2 3
Add the "white-space:pre;" style attribute when output. This style means "Blank will be retained by the browser"
2、‘ ’
- Use scenario: You can use it when you don't want the browser to automatically merge or collapse spaces in text. For example, when displaying names or blocks of text that need to keep spaces, especially when these texts are included in HTML tags and spaces between them are desired to be preserved.
- Advantages: It is used directly through HTML entity form, which is convenient for embedding in HTML content, and does not need to consider character encoding issues.
- Example:
<p>Hello, world!</p>In this code, the spaces between Hello, and world! will be preserved, and will not be automatically collapsed or merged even in some cases (such as the browser window is smaller).
3、‘\xa0’
- Usage scenario: In JavaScript, CSS, or other environments that support Unicode characters, you may need to use \xa0 to represent non-breaking spaces. \xa0 is the direct representation of the Unicode code point (hexadecimal representation) in a JavaScript string.
- Advantages: It allows direct reference of spaces through Unicode code points in programming environments such as JavaScript, which facilitates string processing and internationalization support during programming.
- Example: In JavaScript, var text = "Hello,\u00A0world!"; Here \u00A0 is the equivalent Unicode escape sequence of \xa0, indicating a non-breaking space.
4. Half-width space (\u0020)
This is the most common space character, corresponding to the 32nd character in the ASCII code. Used by default in most scenarios such as HTML, CSS, JavaScript, etc.
5. Full-width space (\u3000)
Commonly used in Chinese typesetting, its width is roughly equal to the width of one Chinese character.
Summarize
This is the end of this article about the various forms of front-end line breaks and spaces. For more related contents of front-end line breaks and spaces, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!