How to prevent div from wrapping in css-CSS Tutorial-php.cn

How to prevent div from wrapping in css

藏色散人

Release： 2023-02-17 16:00:31

Original

7667 people have browsed it

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.

How to prevent div from wrapping in css

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.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>PHP中文网</title>
    <style>
      .content {
        width: 150px;
        height: 60px;
        background-color: lightcyan;
      }
    </style>
  </head>
  <body>
    <div class="content">
       PHP中文网 欢迎您 欢迎您 欢迎您
    </div>
  </body>
</html>

Copy after login

Rendering:

How to prevent div from wrapping in css

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>PHP中文网</title>
    <style>
.content {
  width: 150px;
  height: 60px;
  background-color: lightcyan;
  white-space: nowrap;
}
    </style>
  </head>
  <body>
    <div class="content">
       PHP中文网 欢迎您 欢迎您 欢迎您
    </div>
  </body>
</html>

Copy after login

Rendering:

How to prevent div from wrapping in css

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. 
```
Copy after login
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!