CSS Letter spacing, CSS word spacing

CSS Letter Spacing

Letter spacing property allows us to control the amount of space between each letters in a word.

p {
  letter-spacing: 2px;
}

The above code sets 2 pixel space between each letter in a word .

The following HTML page dispalys a normal letter spacing line and 2px letter spacing line.

<html>
<head>
  <style type="text/css">
    .lspace{
      letter-spacing: 3px;
    }
  </style>
</head>
<body>
  <p> Normal letter spacing</p>
  <hr>
  <p class="lspace">
    letter space applied as 3px
  </p>
</body>
</html>

output

CSS Word spacing

Word spacing property allows us to control the amount of space between each word in a line.

p {
  word-spacing: 3px;
}

The above code sets 2 pixels space between each word in a line.

The following HTML page dispalys a normal word spacing line and 10px word spacing line.

<html>
<head>
  <style type="text/css">
    .wspace{
      word-spacing: 10px;
    }
  </style>
</head>
<body>
  <p> Normal word spacing</p>
  <hr>
  <p class="wspace">
    word space applied as 10 pixels.
  </p>
</body>
</html>

output

CSS White Space

If you put so many spaces between words in a markup page, the browser will display only one space and other spaces will ignored also ignored the line break. This is known as white space collapsing .

p {
  white-space:nowrap;;
}

CSS pre

When you use the pre keyword in markup, you can see the output content exactly as it appears in your markup.

p {
  white-space:pre;
}

The following document dispalys two paragraph, one with normal paragraph and the next paragraph styled with white-space pre.

<html>
<head>
  <style type="text/css">
    .wspace{
      white-space:pre;
    }
  </style>
</head>
<body>
  <p>
    This paragraph
    Not applied
    pre white spacing
  </p>
  <p class="wspace">
    This paragraph
    applied
    pre white spacing
  </p>
</body>
</html>

output

CSS nowrap

The white-space nowrap breaks text onto a new line only if explicitly told to with a < br > element, otherwise text does not wrap.

p {
  white-space:nowrap;
}

For a better layout it is better to avoid white-space nowrap because it can cause layout problems when your text overlaps or pushes other content out of the way.

The following document dispalys two paragraph, one with normal paragraph and the next paragraph styled with white-space nowrap.

<html>
<head>
  <style type="text/css">
    .wspace{
      white-space: nowrap;
    }
  </style>
</head>
<body>
  <p>
    This paragraph Not applied pre white spacing
  </p>
  <p class="wspace">
    This paragraph applied nowrap white spacing
  </p>
</body>
</html>

output

In the above image yo can see the second line overlap the screen area, because it used white-space:nowrap.