How to prevent div from wrapping in css

In CSS, you can use the white-space attribute to prevent the div from wrapping. You only need to add the "white-space:nowrap;" style to the div element. The white-space attribute can set how to handle whitespace within the element. When the attribute value is set to "nowrap", the text of the specified element will not wrap. The text will continue on the same line until the br tag is encountered.

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

How to make divs not wrap in css

You can use css to make the text in the corresponding div tag wrap or not wrap. Below we Let’s take a look at how to use css to set the text in a div tag not to wrap.

By default, if the text in the div cannot be displayed on one line, it will automatically wrap and display.

      
  
 PHP中文网 欢迎您 欢迎您 欢迎您 
  

Rendering:

If you want the text to be displayed on one line, do not wrap it automatically. Just set the white-space style to nowrap.

      
  
 PHP中文网 欢迎您 欢迎您 欢迎您 
  

Rendering:

white-space attribute introduction

white- The space attribute sets how to handle white space within the element.

This attribute declares how to handle whitespace characters in elements during the layout process.

Attribute value:

• normal Default. White space is ignored by the browser.

• pre White space will be preserved by the browser. It behaves like the

  tag in HTML.

• nowrap The text will not wrap; the text will continue on the same line until the
  tag is encountered.

• pre-wrap Preserves whitespace sequences, but wraps normally.

• pre-line merges whitespace sequences but retains newlines.

• inherit specifies that the value of the white-space attribute should be inherited from the parent element.

【Recommended learning:css video tutorial】

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