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

Home

Web Front-end

CSS Tutorial

How to prevent div from wrapping in css

藏色散人

Mar 02, 2021 am 10:42 AM

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.

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>

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!

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

Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)May 09, 2025 am 09:57 AM

What does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.

CSS Animations: Is it hard to create them?May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

@keyframes CSS: The most used tricksMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatilityandpowerincreatingsmoothCSSanimations.Keytricksinclude:1)Definingsmoothtransitionsbetweenstates,2)Animatingmultiplepropertiessimultaneously,3)Usingvendorprefixesforbrowsercompatibility,4)CombiningwithJavaScriptfo

CSS Counters: A Comprehensive Guide to Automatic NumberingMay 07, 2025 pm 03:45 PM

CSSCountersareusedtomanageautomaticnumberinginwebdesigns.1)Theycanbeusedfortablesofcontents,listitems,andcustomnumbering.2)Advancedusesincludenestednumberingsystems.3)Challengesincludebrowsercompatibilityandperformanceissues.4)Creativeusesinvolvecust

Modern Scroll Shadows Using Scroll-Driven AnimationsMay 07, 2025 am 10:34 AM

Using scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before. Geoff covered a newer approach that uses the animation-timeline property. Here’s yet another way.

Revisiting Image MapsMay 07, 2025 am 09:40 AM

Let’s run through a quick refresher. Image maps date all the way back to HTML 3.2, where, first, server-side maps and then client-side maps defined clickable regions over an image using map and area elements.

State of Devs: A Survey for Every DeveloperMay 07, 2025 am 09:30 AM

The State of Devs survey is now open to participation, and unlike previous surveys it covers everything except code: career, workplace, but also health, hobbies, and more.

What is CSS Grid?Apr 30, 2025 pm 03:21 PM

CSS Grid is a powerful tool for creating complex, responsive web layouts. It simplifies design, improves accessibility, and offers more control than older methods.

See all articles