CSS Introduction | Basic CSS Properties | CSS Text
Representative text properties available in CSS are as follows.
| Property | Description |
|---|---|
| color | Sets the text color. |
| direction | Sets the direction in which text is written. |
| letter-spacing | Sets the spacing between characters in text. |
| word-spacing | Sets the spacing between words in text. |
| text-indent | Sets whether the first line of a paragraph is indented. |
| text-align | Sets horizontal alignment of text. |
| text-decoration | Adds or removes various effects on text. |
| text-transform | Sets capitalization for English letters included in text. |
| line-height | Sets line spacing for text. |
| text-shadow | Adds a shadow effect to text. |
| unicode-bidi | Used with the direction property to set the default output direction of text. |
| vertical-align | Sets vertical alignment inside an HTML element. |
| white-space | Sets whitespace handling inside an HTML element. |
color Property
The color property sets the color of text.
The default text color on a web page is black.
The color property value specified on the <body> tag is applied to all text elements on the web page.
However, if a color value is specified separately for an element, that value takes precedence over the value specified on the <body> tag.
<style>
body { color: red; }
p { color: maroon; }
</style>
direction Property
The direction property sets the direction in which text is written.
On a web page, text is written from left to right by default.
When the direction property is left-to-right(ltr), text is written from left to right like the default setting.
When the direction property is right-to-left(rtl), text is written in the opposite direction, from right to left.
<style>
.rightToLeft { direction: rtl; }
</style>
letter-spacing Property
The letter-spacing property sets the spacing between characters in text.
<style>
.decLetterSpacing { letter-spacing: -3px; }
.incLetterSpacing { letter-spacing: 10px; }
</style>
word-spacing Property
The word-spacing property sets the spacing between words in text.
Unlike letter-spacing, it sets spacing based on word gaps rather than character gaps.
<style>
.decWordSpacing { word-spacing: -3px; }
.incWordSpacing { word-spacing: 10px; }
</style>
text-indent Property
The text-indent property sets whether the first line of a paragraph is indented.
Paragraphs on a web page are not indented by default.
<style>
.paraIndent { text-indent: 30px; }
</style>
text-align Property
The text-align property sets the horizontal alignment of text.
The alignment direction set with text-align takes precedence regardless of the text-direction property.
<style>
h2 { text-align: left; }
h3 { text-align: right; }
h4 { text-align: center; }
</style>
text-decoration Property
The text-decoration property can decorate text in several ways.
<style>
h2 { text-decoration: overline; }
h3 { text-decoration: line-through; }
h4 { text-decoration: underline; }
a { text-decoration: none; }
</style>
It is often used with the value none to remove the underline from linked text.
text-transform Property
The text-transform property sets capitalization for English letters included in text.
This property can change all English letters in text to uppercase or lowercase. It can also change only the first letter of each word to uppercase.
<style>
h2 { text-transform: uppercase; }
h3 { text-transform: lowercase; }
h4 { text-transform: capitalize; }
</style>
The text-transform property does not affect Korean and applies only to English letters.
line-height Property
The line-height property sets line spacing for text.
<style>
.narrowLineHeight { line-height: 0.8; }
.wideLineHeight { line-height: 1.8; }
</style>
text-shadow Property
The text-shadow property sets a simple shadow effect on text.
<style>
h2 { text-shadow: 2px 1px #3399CC; }
</style>
CSS3 Text
CSS3 makes it possible to manipulate text in HTML documents in more varied ways. Text-related properties newly added in CSS3 are as follows.
| Property | Description |
|---|---|
| text-overflow | Sets how text outside the content area is represented. |
| word-wrap | Allows a long word that exceeds the content area to be split onto the next line. |
| word-break | Sets the standard used to split a long word when it needs to be broken. |
| text-emphasis | Lets users set emphasis marks. |
| text-align-last | Sets the alignment method for the last line of text. |
| text-justify | Sets the alignment method when text is justified. |
Browser Support for CSS3 Text Properties
Major browser versions that support CSS3 text properties are as follows. The versions where each browser first supported the feature with a vendor prefix are also shown.
| Property | ie | chrome | firefox | safari | opera |
|---|---|---|---|---|---|
| text-overflow | 6.0 | 4.0 | 7.0 | 3.1 | 11.0 / 9.0 -o- |
| word-wrap | 5.5 | 23.0 | 3.5 | 6.1 | 12.1 |
| word-break | 5.5 | 4.0 | 15.0 | 3.1 | 15.0 |
text-overflow Property
The text-overflow property sets how text outside the content area is represented.
The overflowing text can be clipped or represented with an ellipsis(…).
<style>
p { white-space: nowrap; width: 250px; overflow: hidden; }
#p_01 { text-overflow: clip; }
#p_02 { text-overflow: ellipsis; }
</style>
If the overflow property is set to visible, the user can see the text that extends outside the content area.
<style>
#p_01:hover, #p_02:hover { overflow: visible; }
</style>
word-wrap Property
The word-wrap property allows a long word that exceeds the content area to be split onto the next line.
<style>
p { border: solid 1px black; width: 130px; }
#p_01, #p_03 { word-wrap: break-word; }
</style>
The word-wrap property applies only to words made of English letters and does not apply to Korean.
word-break Property
The word-break property sets the standard used to split a long word when it needs to be broken.
Words can be split by character, or they can be split based on hyphens(-).
<style>
p { border: solid 1px black; width: 130px; }
#p_02 { word-break: break-all; }
#p_03 { word-break: keep-all; }
</style>
The example above shows the difference between the word-wrap and word-break properties.
The word-break property applies only to words made of English letters, while Korean automatically uses break-all.