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.