InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

CSS properties

  • CSS3 flexbox
  • all
  • animation
  • background-color
  • background-image
  • border
  • border-color
  • border-radius
  • border-style
  • border-width
  • bottom
  • box-shadow
  • box-sizing
  • calc function
  • clip
  • color
  • color value currentColor
  • color values
  • cursor
  • float
  • font
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • generated content
  • left
  • letter-spacing
  • line-height
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
  • margin
  • max-height
  • max-width
  • min-height
  • min-width
  • opacity
  • outline
  • outline-color
  • outline-style
  • outline-width
  • overflow
  • padding
  • pointer-events
  • position
  • resize
  • right
  • text-align
  • text-decoration
  • text-indent
  • text-overflow
  • text-shadow
  • text-transform
  • top
  • transform
  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
  • visibility
  • white-space
  • word-break
  • word-spacing
  • word-wrap/overflow-wrap
  • z-index
 
  • Home
  • > Tutorials
  • > CSS
  • > CSS properties

CSS white-space – collaping and wrapping of whitespaces and newlines

on Mar 13, 2016

CSS whitespace property is used to describe how whitespace inside the element is handled. This property specifies two things:

  • Whether and how white space inside the element is collapsed
  • Whether lines will wrap at opportunities

CSS property white-space

CSS version: CSS 2.1
Value: normal | pre | nowrap | pre-wrap | pre-line
Initial: normal
Applies to: all elements
Inherited: yes

white-space values

New linesSpaces and TabsText wrapping
normalCollapseCollapseWrap
prePreservePreserveNo wrap
nowrapCollapseCollapseNo wrap
pre-wrapPreservePreserveWrap
pre-linePreserveCollapseWrap

Example – white-space normal

This is default case. Newlines, spaces and tabs will collapse and text will wrap.

<style>
div {
  width: 200px; height: 100px;
  background-color: lightgreen;
  white-space: normal;
}
</style>
<div>
This       is some text which is used as an example for css white-space property.
Second line.
</div>
refresh done
try it online

Example – white-space pre

Newlines, spaces and tabs will be preserved and text will not wrap.

<style>
div {
  width: 200px; height: 100px;
  background-color: lightgreen;
  white-space: pre;
}
</style>
<div>
This       is some text which is used as an example for css white-space property.
Second line.
</div>
refresh done
try it online

Example – white-space nowrap

Newlines, spaces and tabs will collapse and text will not wrap.

<style>
div {
  width: 200px; height: 100px;
  background-color: lightgreen;
  white-space: nowrap;
}
</style>
<div>
This       is some text which is used as an example for css white-space property.
Second line.
</div>
refresh done
try it online

Example – white-space pre-wrap

Similar to pre but allows text to wrap.

<style>
div {
  width: 200px; height: 100px;
  background-color: lightgreen;
  white-space: pre-wrap;
}
</style>
<div>
This       is some text which is used as an example for css white-space property.
Second line.
</div>
refresh done
try it online

Example – white-space pre-line

Similar to normal but preserves newline.

<style>
div {
  width: 200px; height: 100px;
  background-color: lightgreen;
  white-space: pre-line;
}
</style>
<div>
This       is some text which is used as an example for css white-space property.
Second line.
</div>
refresh done
try it online

Related

  • CSS overflow - visible, hidden and scroll for overflowing content
  • CSS text-overflow - truncate text with three dots
  • HTML pre tag tutorial
  • CSS clip

Specification

  • W3C CSS 2.1 white-space specification
  • W3C CSS 3 white-space specification

Suggested posts:

  1. CSS word-spacing – additional space between words
  2. HTML pre tag tutorial
  3. CSS visibility – hide an element keeping its space
  4. CSS text-decoration – underline, overline and strikeout text
  5. CSS text-overflow – truncate text with three dots
  6. CSS word-wrap/overflow-wrap – specify if a word can break anywhere
  7. CSS text-transform – capitalize, uppercase and lowercase text
  8. CSS letter-spacing – additional spacing between adjacent chars
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged CSS, CSS properties, Tutorials

Follow InfoHeap

facebook
twitter
googleplus
  • Browse site
  • Article Topics
  • Article archives
  • Recent Articles
  • Contact Us
  • Omoney
Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

Copyright © 2023 InfoHeap.

Powered by WordPress