How to use white-space:nowrap in CSS

white-space:nowrap is generally used in special situations. Today we will study its grammatical structure and default parameters so that everyone can become more familiar with white-space:nowrap

DIV CSS white-space norma nowrap forces all text to be displayed in the same line, so that all text content is displayed in one row without wrapping.

Let the text not wrap automatically. No matter how much the CSS width is set, all text will be displayed in one line. Especially for the title list, we want to display only one title content per line, and sometimes the width is limited and the title text has too much width (width) and is limited, which will cause the text to wrap automatically. In this case, we can use white-space The style allows it to be displayed in one row without line breaks. Of course, in order to hide the excess text content, we can add a css overflow:hidden style.

white-space syntax and structure

white-space syntax:

white-space: normal nowrap

white-space parameters:

normal: Default processing method

nowrap: Force all text to be displayed on the same line, and will not wrap until the end of the text or encountering the br tag object. It is recommended to use white-space:nowrap to force no line breaks.

white-space description:

white-space sets or retrieves the text display mode within the object. Usually we use it to force one line to display content

Usually we use white-space:nowrap to force the text content not to wrap, and display all the text content in one line within the object.

white-space practice case

I set up 2 object boxes, one setting forces the peer to display text content. The second setting forces peers to show, but uses the html br tag to observe the effect. For the white-space case application effect, I set the css width to 120px, the css height to 60px, and the css line-height line-height to 20px.

1. css code

div{ width:120px; height:60px; line-height:20px}

.div { white-space:nowrap}

2. HTML code snippet

The content will be in one line Force full display

The content uses br to wrap

will not be
Line break display

White-space forces no line break and br forces line break CSS case

white-space forces no line break and forces br tag line break

Everyday Us In order to allow the text content to be displayed in one line, even if the width is not enough, it cannot wrap. We can use the white-space style, but if we encounter the html br forced line break tag, whether we set white-space or not, it will be forced by
Line break.

Related reading:

How to learn Div and CSS

How to use the position of css

How to set the min-width and max-width of CSS

The above is the detailed content of How to use white-space:nowrap in CSS. For more information, please follow other related articles on the PHP Chinese website!