How to add space symbols in css

There are four ways to add space symbols in CSS: HTML entity characters (such as and ), text attributes (such as white-space and word-spacing), CSS functions (such as calc(1em) and space(1 )) and pseudo-elements (such as ::after).

Add a space symbol in CSS

Add a space symbol (space, newline, or tab) in CSS There are several ways to add spaces:

1. HTML entity characters

Using HTML entity characters is a common way to add spaces:

•  : The entity represents non-breaking whitespace (separating text but not wrapping it).
• : The entity can also represent non-newline spaces.
•  : The entity represents half-width spaces (slightly wider than non-newline spaces).
•  : The entity represents a non-breaking space (slightly narrower than a half-width space).
•  : Entity represents thin spaces (narrower than non-breaking spaces).

2. Text attributes

You can use text attributes to control spaces, for example:

• white-space: This property controls how word and line spaces are handled. For example, white-space: nowrap; prevents words from wrapping.
• word-spacing: This property sets the spacing between words.
• letter-spacing: This property sets the spacing between letters.

3. CSS function

CSS function can generate spaces, for example:

• calc(1em): Create a 1em space.
• space(1): Creates a 1% gap relative to the width of the parent element.

4. Pseudo elements

You can use pseudo elements to add spaces to the container, for example:

• :: after: Add content after the element, for example: ::after { content: " "; }.

Example

HTML:

<p>这是<span> </span>一个<span>&emsp;</span>带空格<span>&ensp;</span>的文本。</p>

CSS:

p {
  word-spacing: 1em;
  letter-spacing: 0.5em;
}

Output:

This is text with spaces.

The above is the detailed content of How to add space symbols in css. For more information, please follow other related articles on the PHP Chinese website!