How to set text not to wrap in css

In web design, text is one of the most important elements. How to make text present the best effect on the page is a question we need to think about. How to prevent text from wrapping is one of the more common problems. This article will explore how to control text not to wrap through CSS.

1. white-space attribute

The white-space attribute is an important attribute in CSS and is used to control how whitespace characters in elements are processed. It mainly includes the following values:

1. normal

#This is the default value, which means that blank characters will be ignored by the browser. If there are consecutive blank characters, the browser The browser will only display a blank character.

2. #pre

pre means retaining blank characters, which will retain the blank characters written in HTML, which will cause the blank characters in HTML to be displayed on the page.

3. nowrap

nowrap means that line breaks are not allowed. If there is not enough space to display text in a line, the text will overflow the scope of the element.

4. pre-wrap

pre-wrap means retaining whitespace characters in HTML and allowing line breaks.

5. pre-line

pre-line means that whitespace characters in HTML are retained, but consecutive whitespace characters are ignored and line breaks are allowed.

2. Word-wrap attribute

The word-wrap attribute is used to control how the browser processes words. If the words in a line are too long, the width of the element will increase beyond the width range of the parent element, affecting the layout of the page.

1. normal

This is the default value, which means the browser will not break newlines within words.

2. break-word

break-word will break newlines within the word to prevent the word from affecting the layout.

3. Combined use of white-space and word-wrap

The white-space and word-wrap attributes can be used together to achieve the effect of controlling text wrapping.

1. white-space:nowrap;

word-wrap:break-word;

This means that line breaks are not allowed, but the word is too long. When a word exceeds the width of the parent element, line breaks are broken within the word.

2. white-space:pre-wrap;

word-wrap:break-word;

This means that white-space characters in HTML are preserved and allowed Line breaks, while breaking line breaks within words.

By combining multiple values, we can achieve more precise control effects.

Summary:

Control text without line wrapping through CSS, you can use the white-space attribute and word-wrap attribute, and combine multiple values ​​to achieve this. This is very important for the layout effect of the website. If you want to control the vertical alignment of text, text overflow hiding and other special effects, you can also use it in conjunction with other CSS properties. As long as you use it flexibly, you will get twice the result with half the effort in web design.

The above is the detailed content of How to set text not to wrap in css. For more information, please follow other related articles on the PHP Chinese website!