Home > Article > Web Front-end > How to prevent div from wrapping in css

How to prevent div from wrapping in css

藏色散人Original: 2021-03-02 10:42:277602browse

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.

<!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>

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>

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. 
```
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!

html5 css css3 html 继承

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to set div border color with cssNext article：How to set div border color with css

See more

How to prevent div from wrapping in css

Related articles