Uly.me

cloud engineer

  • Home
  • Category
    • Cloud
    • PHP
    • Linux
    • HTML
    • WP
    • CSS
    • SVN
    • Mac
    • Git
    • JS
    • Misc
  • About
    • Me
    • Archives
    • Contact
    • Portfolio
    • Podcasts
  • Code
    • Github
    • Docker Hub
    • Unfuddle
You are here: Home / CSS / CSS White-Space Property

September 20, 2016

CSS White-Space Property

Whitespace, line breaks, spaces and tabs are collapsed by default in HTML documents. To add space, we can add “&nbsp;” which translates to space, to add some separation between elements. In addition <br/> or line breaks can also be utilized to add space. There is a HTML property called white-space which can be used to configure how the whitespace inside the element is displayed. The following is a list of whitespace options.

Syntax

/* Keyword values */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
 
/* Global values */
white-space: inherit;
white-space: initial;
white-space: unset;

/* Keyword values */ white-space: normal; white-space: nowrap; white-space: pre; white-space: pre-wrap; white-space: pre-line; /* Global values */ white-space: inherit; white-space: initial; white-space: unset;

Usage

p { white-space: normal }

p { white-space: normal }

white-space: normal

This is the default format. No breaks between paragraphs.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

white-space: nowrap

With nowrap, paragraph lines are extended out. No wrapping. No breaks between paragraphs.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

white-space: pre-line

With pre-line, breaks are inserted between paragraphs. Paragraphs are wrapped.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The couple of examples above shows how elements can be styled using the white-space property.

Filed Under: CSS Tagged With: white-space

Subscribe

Cloud

  • Extend an EBS Volume
  • Convert JSON to YAML
  • AWS S3 Killedted
  • Serverless Jekyll on AWS
  • AWS and VMWare

Linux

  • Cronjob Not Running
  • Password Expiry
  • Multiple VirtualHosts
  • Convert JSON to YAML
  • Empty A File

PHP

  • Comparing Time
  • Quick Database Check
  • Laravel 5.4 Install
  • Mass Find and Replace
  • WordPress Mobile Detect

Copyright © 2018. All rights reserved.