CSS Properties

• text-indent
• letter-spacing
• line-height
• word-spacing
• white-space
• word-wrap
• word-break

letter-spacing

It specifices the space between text characters. We can set this property to either normal or specify it in the form of the distance betwwen two consecutive letters using identifier, such as px(pixels), in(inches), pt(points) and cm(centimeters).

Lenght = px, in, pt, cm, em

Example:

h1{
letter-spacing : 50px;
}

line-height

It specifies the distance between two lines. We can set this property to normal or specify it in the form of length, number or percentage.

Example:

p{
line-height : 60%;
}

text-indent

It specifies the indention of the first line of text in a block.We can specify this property in the form of either length or percentage.

Negative values are allowed. The first line will be indented to the left if the value is negative.

Example:

p{
text-indent : 30px;
}

white-space

This white space property is used to specify how to display the content within an element. It is used to handle the white spaces inside an element.

• normal - This is a default value. in this value, text is wrapped when necessary. sequences of white space will collapse into a single whitespace.
• nowrap - Sequences of white space will collapse into a single whitespace. in this value, text will never wrap to the next line and only break when <br> tag is used.
• pre - Whitespace is preserved by the browser. it is act like html <pre> tag. text will only wrap on line breaks.
• pre-line - Sequences of white space will collapse into a single whitespace. texts are wrapped when necessary, and on line break.
• pre-wrap - Whitespace is preserved by the browser. texts are wrapped when necessary, and on line break.

Example:

p{
white-space : nowrap;
}

word-spacing

The word-spacing property increases or decrease the white space between words. We can set this property to normal or specify in the form of length value.

Example:

p{
word-spacing : 20px;
}

word-wrap

word-wrap property allows long words to be able to be broken and wrap onto the next line. We can set this property to either normal or break-word.

Example:

p{
word-wrap : break-word;
}

word-break

The word-break property specifies line breaking rules for non-CJK scripts. CJK scripts are Japanese/Chinese/Korean(CJK) scripts. We can set this property to normal, break-all or keep-all.

• normal- Default value. Break words according to their usual rules.
• break - all Lines may break between any two letters.
• keep-all - Breaks are prohibited between pairs of letters.

p{
word-break : break-all;
}