How to prevent text from wrapping using CSS

In web development, text not wrapping is a very common requirement. Whether it's text in a paragraph or the name of a group of pictures, you need to avoid long words or line breaks. So how to achieve non-breaking text through CSS?

First, we need to understand several CSS properties:

1. white-space

This property is used to set the element How to deal with whitespace characters. Common attribute values ​​are:

• normal: Extra whitespace characters will be ignored, consecutive whitespace characters will be merged into one space, and lines will be broken if necessary
• pre: Extra whitespace characters will be preserved, but newlines will not wrap
• nowrap: Extra whitespace characters will be ignored, but newlines will not wrap
• pre-wrap: Extra whitespace characters will be preserved and automatically wrapped if necessary
• pre-line: Extra whitespace characters will be ignored, but Automatically wrap lines when necessary

2. word-break

This attribute is used to set the line breaking rules for words. Common attribute values ​​are:

• normal: Use the browser’s default line breaking rules
• break-all: Allow within words Line breaking, suitable for unbroken text (such as URL)
• keep-all: Line breaking as much as possible, suitable for text composed of continuous characters such as Chinese and Japanese

3. overflow-wrap

This attribute is used to control the line breaking rules within the boundaries of the element, that is, it affects the line breaking position of the word. Common attribute values ​​are:

• normal: Use the browser’s default line breaking rules
• break-word: When a word exceeds When the element boundary is reached, force a line break

Next, we can use these attributes to achieve non-line wrapping of the text.

Method 1: Use white-space and overflow-wrap

First, we can merge the blanks into one space, and then if necessary Automatically wrap lines. This can be achieved by setting the white-space property to nowrap and the overflow-wrap property to break-word. For example:

p {
  white-space: nowrap;
  overflow-wrap: break-word;
}

In this way, when a word is too long and exceeds the element boundary, the browser will force it to break and continue to display on the next line.

Method 2: Use word-break and white-space

Another method is to set the word while retaining the whitespace characters line breaking rules. We can set the word-break property to keep-all and the white-space property to nowrap. For example:

p {
  white-space: nowrap;
  word-break: keep-all;
}

In this way, the browser will try not to break lines within words and break words when necessary, without affecting the beauty of the layout.

Method 3: Use word-wrap

For browsers that do not support the overflow-wrap attribute, we can use word- wrap attribute instead. For example:

p {
  word-wrap: break-word;
}

In this way, when a word is too long and exceeds the element boundary, the browser will force it to break and continue to display on the next line.

Summary

The above are several ways to achieve text without line breaks. Different combinations of attributes are needed in different situations to achieve the best results. In development, choices need to be made based on specific circumstances, rather than blindly using a certain method.

The above is the detailed content of How to prevent text from wrapping using CSS. For more information, please follow other related articles on the PHP Chinese website!