Arrow

CSS White Space

AuthorHariom Prajapati

Pubish Date07 Sep 2022

categoryCSS

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