CSS Text
- Previous Page CSS Background
- Next Page CSS Font
CSS text properties can define the appearance of text.
Through text properties, you can change the color of the text, character spacing, align the text, decorate the text, indent the text, and so on.
Indent Text
Indenting the first line of paragraphs on a web page, which is one of the most commonly used text formatting effects.
CSS provides text-indent propertyThis property makes it convenient to indent text.
By using the text-indent property, the first line of all elements can be indented by a given length, even if the length is negative.
The most common use of this property is to indent the first line of a paragraph, the following rule will indent the first line of all paragraphs by 5 em:
p {text-indent: 5em;}
Note:Generally, text-indent can be applied to all block-level elements, but this property cannot be applied to inline elements, and the text-indent property cannot be applied to replacement elements such as images. However, if there is an image in the first line of a block-level element (such as a paragraph), it will move with the rest of the text in that line.
提示：If you want to 'indent' the first line of an inline element, you can create this effect with left padding or margin.
Using negative values
text-indent can also be set to a negative value. By using this technique, many interesting effects can be achieved, such as 'hanging indentation', where the first line hangs on the left side of the remaining part of the element:
p {text-indent: -5em;}
However, be careful when setting negative values for text-indent, if a negative value is set for a paragraph, some text of the first line may exceed the left boundary of the browser window. To avoid this display problem, it is recommended to set an additional margin or some padding for negative indentation:
p {text-indent: -5em; padding-left: 5em;}
Using percentage values
The text-indent property can use all length units, including percentage values.
Percentages are relative to the width of the parent element of the indentation element. In other words, if the indentation value is set to 20%, the first line of the affected element will be indented by 20% of the width of its parent element.
In the following example, the indentation value is 20% of the parent element, that is, 100 pixels:
div {width: 500px;}
p {text-indent: 20%;}
<div>
<p>this is a paragragh</p>
</div>
Inheritance
The text-indent property can be inherited, consider the following markup:
div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">some text. some text. some text.</div>
<p>this is a paragragh.</p>
</div>
</div>
The paragraphs marked above will also be indented by 50 pixels, because this paragraph inherits the indentation value of the div element with id 'inner'.
水平对齐
text-align 是一个基本的属性，它会影响一个元素中的文本行它们之间的对齐方式。它的前 3 个值相当直接，不过第 4 个和第 5 个则略有些复杂。
值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。
西方语言都是从左向右读，所有 text-align 的默认值是 left。文本在左边界对齐，右边界呈锯齿状（称为“从左到右”文本）。对于希伯来语和阿拉伯语之类的语言，text-align 则默认为 right，因为这些语言从右向左读。不出所料，center 会使每个文本行在元素中居中。
提示：要将块级元素或表元素居中，需要在这些元素上适当地设置左、右外边距来实现。
text-align:center 与 <CENTER>
您可能会认为 text-align:center 与 <CENTER> 元素的作用一样，但实际上二者大不相同。
<CENTER> 不仅影响文本，还会把整个元素居中。text-align 不会控制元素的对齐，而只影响内部内容。元素本身不会从一段移到另一端，只是其中的文本受影响。
justify
最后一个水平对齐属性是 justify。
在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。您也许已经注意到了，两端对齐文本在打印领域很常见。
需要注意的是，要由用户代理（而不是 CSS）来确定两端对齐文本如何拉伸，以填满父元素左右边界之间的空间。如需了解详情，请参阅 CSS text-align 属性参考页.
字间隔
word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。
word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近：
p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">
这是一个段落。单词之间的间隔将会增加。
</p>
<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>
Example TIY: Increase or decrease word spacing (character spacing)
Note:For a deeper understanding of CSS's definition of 'word', please visit CSS word-spacing attribute reference page.
Letter spacing
letter-spacing attributeThe difference from word-spacing is that letter spacing modifies the spacing between characters or letters.
Like the word-spacing attribute, the letter-spacing attribute has all length values as possible values. The default keyword is normal (which is the same as letter-spacing:0). The input length value will increase or decrease the spacing between letters by the specified amount:
h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
<h1>This is header 1</h1>
<h4>This is header 4</h4>
Character transformation
text-transform attributeThis attribute handles the case of text. It has 4 values:
- none
- uppercase
- lowercase
- capitalize
The default value none does not make any changes to the text, using the original case in the source document. As the name implies, uppercase and lowercase convert the text to full uppercase and full lowercase characters. Finally, capitalize only capitalizes the first letter of each word.
As an attribute, text-transform may not be very important, but if you suddenly decide to change all h1 elements to uppercase, this attribute is very useful. You don't have to modify the content of all h1 elements separately, just use text-transform to complete this modification:
h1 {text-transform: uppercase}
Using text-transform has two advantages. First, you only need to write a simple rule to complete this modification without modifying the h1 element itself. Second, if you decide to switch all the cases back to the original cases later, it can be done more easily.
text decoration
Next, let's discuss text-decoration attributeThis is an interesting attribute that provides many very interesting behaviors.
text-decoration has 5 values:
- none
- underline
- overline
- line-through
- blink
Unexpectedly, 'underline' will add an underline to the element, just like the U element in HTML. 'Overline' has the opposite effect, drawing an overline at the top of the text. The value 'line-through' draws a line through the middle of the text, equivalent to the S and strike elements in HTML. 'blink' will make the text blink, similar to the blink tag supported by Netscape, which is quite controversial.
The 'none' value will turn off all decorations that were originally applied to an element. Typically, undecorated text is the default appearance, but it is not always the case. For example, links have an underline by default. If you want to remove the underline from hyperlinks, you can use the following CSS to do so:
a {text-decoration: none;}
Note:If you explicitly remove the underline from the link using such a rule, the only visual difference between the anchor and normal text will be color (at least that is the case by default, although it cannot be guaranteed that the color is definitely different).
It is also possible to combine multiple decorations in a single rule. If you want all hyperlinks to have both underline and overline, the rule would be as follows:
a:link a:visited {text-decoration: underline overline;}
However, it is important to note that if two different decorations match the same element, the winning rule's value will completely replace the other value. Consider the following rule:
h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}
For the given rule, all h2 elements with the class 'stricken' will have only one line-through decoration, without underline and overline, because The text-decoration value will replace rather than accumulate.
Handling whitespace
white-space attributeIt affects how the user agent processes spaces, line breaks, and tab characters in the source document.
By using this attribute, you can affect the way the browser handles whitespace between characters and between lines of text. To some extent, the default XHTML processing has already completed the whitespace handling: it combines all whitespace characters into a single space. Therefore, given the following markup, when it is displayed in a web browser, there will only be one space between each character, and the line breaks within the element will be ignored:
<p>This paragraph has many
spaces in it.</p>
This default behavior can be explicitly set using the following declaration:
p {white-space: normal;}
The above rules tell the browser to handle it as usual: discard extra whitespace. If this value is given, newline characters (carriage returns) will be converted to spaces, and sequences of multiple spaces in a line will be converted to a single space.
Example TIY: white-space: normal
Value pre
However, if white-space is set to pre, the handling of whitespace within the element affected by this property is different; it behaves like an XHTML pre element; whitespace is not ignored.
If the value of the white-space property is pre, the browser will pay attention to additional spaces, even carriage returns. In this respect, and only in this respect, any element can be equivalent to a pre element.
Note:After testing, it was found that IE 7 and earlier versions of browsers do not support this value, so please use non-IE browsers to view the example above.
Value nowrap
The corresponding value is nowrap, which prevents text from wrapping within an element unless a br element is used. Using nowrap in CSS is very similar to using <td nowrap> in HTML 4 to set a table cell so that it cannot wrap, but the white-space value can be applied to any element.
Example TIY: white-space: nowrap
Values pre-wrap and pre-line
CSS2.1 introduced the values pre-wrap and pre-line, which were not available in previous versions of CSS. These values are designed to allow creators to better control the handling of whitespace.
If the white-space property of an element is set to pre-wrap, the text within the element will preserve whitespace sequences, but the text lines will wrap normally. If set to this value, both the line separators in the source text and the generated line separators will be preserved. pre-line is the opposite of pre-wrap and will merge whitespace sequences like normal text, but keep line breaks.
Example TIY: white-space: pre-wrap
Example TIY: white-space: pre-line
Note:We tested the two examples above in IE7 and FireFox2.0 browsers, but the result is that the values pre-wrap and pre-line are not well supported.
Summary
The following table summarizes the behavior of the white-space property:
| Value | Space character | Line feed | Automatic line break |
|---|---|---|---|
| pre-line | Merge | Preserve | Allow |
| normal | Merge | Ignore | Allow |
| nowrap | Merge | Ignore | Disallow |
| pre | Preserve | Preserve | Disallow |
| pre-wrap | Preserve | Preserve | Allow |
Text direction
If you are reading an English book, you will read from left to right and from top to bottom, which is the flow direction of English. However, not all languages are like this. We know that ancient Chinese is read from right to left, of course, including Hebrew and Arabic, etc. CSS2 introduced a property to describe its directionality.
direction propertyIt affects the writing direction of block-level elements in Chinese, the layout direction of table columns, the direction of horizontal filling of the element box, and the position of the last line in elements aligned at both ends.
Note:For inline elements, only when unicode-bidi propertyThe direction property will only be applied when set to embed or bidi-override.
The direction property has two values: ltr and rtl. Most of the time, the default value is ltr, which displays text from left to right. If you want to display text from right to left, you should use the value rtl.
CSS Text Example:
- Set text color
- This example demonstrates how to set the color of text.
- Set the background color of text
- This example shows how to set the background color of part of the text.
- Specify character spacing
- This example demonstrates how to increase or decrease the character spacing.
- Set line spacing using a percentage
- This example demonstrates how to set the line spacing in a paragraph using a percentage value.
- Set line spacing using a pixel value
- This example demonstrates how to set the line spacing in a paragraph using a pixel value.
- Set line spacing using a number
- This example demonstrates how to set the line spacing in a paragraph using a numerical value.
- Align text
- This example demonstrates how to align text.
- Decorate text
- This example demonstrates how to add decorations to text.
- Indent Text
- This example demonstrates how to indent the first line of text.
- Control letters in text
- This example demonstrates how to control the letters in the text.
- Prevent text wrapping in an element
- This example demonstrates how to prevent text wrapping within an element.
- Increase word spacing
- This example demonstrates how to increase the spacing between words in a paragraph.
CSS Text Properties
| Property | Description |
|---|---|
| color | Set text color |
| direction | Set the text direction. |
| line-height | Set line height. |
| letter-spacing | Set character spacing. |
| text-align | Align text within elements. |
| text-decoration | Add decorations to text. |
| text-indent | Indent the first line of text in an element. |
| text-shadow | Set text shadow. CSS2 includes this property, but it is not retained in CSS2.1. |
| text-transform | Control the letters within elements. |
| unicode-bidi | Set the text direction. |
| white-space | Set the handling of whitespace within elements. |
| word-spacing | Set word spacing. |
- Previous Page CSS Background
- Next Page CSS Font
