clock  Mon - Sun 8.00 AM - 8.00 PM
mail  edu@teknowize.com
fb
instagram
play store
pinterest

More

CSS White Space

Imperial Advance Hero Image

CSS White Space

It is use to handle how white space of text inside an element will show.

 

Syntax -

white-space: value ;

 

values

nowrap

It is use to display text in single line.

pre

It is use to display text in single line but it take two space down from top.
pre-line
It is use to display text in more than one line but it take one space down from top.
pre-wrap It is use to display text in more than one line but it take two space down from top.
normal It is normal text.

 

For example -

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS White Space</title>
  <style>
    .nowrap {
      white-space: nowrap;
    }

    .pre {
      white-space: pre;
    }

    .pre-line {
      white-space: pre-line;
    }

    .pre-wrap {
      white-space: pre-wrap;
    }

    .normal {
      white-space: normal;
    }
  </style>
</head>

<body>
  <html>

  <head>
    <title>CSS White Space</title>
    <link rel="stylesheet" type="text/css" href="E:/style.css">
  </head>

  <body>
    <p class="nowrap">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores tenetur architecto dicta, eius eos dolorem voluptas reiciendis veritatis perspiciatis corporis voluptat sapiente!</p><br>
    <p class="pre"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores tenetur architecto dicta, eius eos dolorem voluptas reiciendis veritatis perspiciatis corporis voluptat sapiente!</p><br>
    <p class="pre-line">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores tenetur architecto dicta, eius eos dolorem voluptas reiciendis veritatis perspiciatis corporis voluptat sapiente!</p><br>
    <p class="pre-wrap">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores tenetur architecto dicta, eius eos dolorem voluptas reiciendis veritatis perspiciatis corporis voluptat sapiente!</p>
  </body>

  </html>

 

Output

White Space

CSS