How to Use the CSS White-Space Property
See CSS: Tips and Tricks for similar articles.The white-space
property determines how sequences of whitespace are displayed. You can learn how to use the CSS white-space
property in just a few steps.
- You first need to know the values you can use with the
white-space
property and what they do. They are:Property Collapses Series of Spaces and/or Tabs in Code Collapses Line Breaks in Code Wraps to Fit Containing Box normal Yes Yes Yes pre No No No nowrap Yes Yes No - Next, enter the code in the HTML, as follows:
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>White-Space</title> </head> <body> <h1>White-Space</h1> <div style="white-space: normal;"> white-space: normal white-space: normal white-space: normal white-space: normal white-space: normal white-space: normal white-space: normal white-space: normal </div> <hr> <div style="white-space: nowrap;"> white-space: nowrap white-space: nowrap white-space: nowrap white-space: nowrap white-space: nowrap white-space: nowrap white-space: nowrap white-space: nowrap </div> <hr> <div style="white-space: pre;"> white-space: pre white-space: pre white-space: pre </div> </body> </html>
This code renders the following:
Related Articles
- Learn the Very Basics of CSS in One Minute
- How to Create a CSS External Style Sheet
- How to Align Text with CSS
- How to Create a Horizontal Navigation Menu with CSS
- How to Create a Fixed-Width Layout with CSS
- How to Remove Spacing Between Table Borders with CSS
- How to Set a Background Image with CSS
- How to Set Text Spacing and Placement in CSS
- How to Style a Table with CSS
- How to Create Boxes with Rounded Corners in CSS
- How to Create a Vertical Navigation Menu with CSS
- How to Use the CSS Opacity Property
- How to Use Multiple Background Images with CSS
- Absolute Positioning with CSS
- How to Use the CSS Border Shorthand Property
- How to Create CSS Button Links
- How to Create a Fluid-Width Layout with CSS
- How to Set Text and Background Color with CSS
- How to Create a CSS Embedded Style Sheet
- How to Add Inline Styles to CSS
- How to Create a Border with CSS
- How to Use the CSS Padding Shorthand Property
- How to Create a Fly-Out Menu with CSS
- How to Use CSS Media Queries in Responsive Design
- How to Adjust Margins with CSS
- How to Use the CSS Background Shorthand Property
- How to Create a Form without Tables Using CSS
- How to Modify Fonts in CSS
- How to Create a Drop-Down Menu with CSS
- How to Apply Padding with CSS
- Fixed Positioning with CSS
- How to Use CSS Transitions
- How to Use the CSS list-style Shorthand Property
- How to Change Text Style in CSS
- How to Create CSS Sprites
- How to Use CSS with Different Media Types
- How to Import Style Sheets with @import in CSS
- How to Use the CSS White-Space Property (this article)
- How to Use the CSS Z-index Property
- How to Create Drop Shadows with the box-shadow Property in CSS3