Detailed description of new text attributes in CSS3
CSS text attribute review 1. white-space: Processing Method of space in the object 2. ction: direction of the Text Stream 3. unicode-bidi: displays the text that is read from different directions on the same page. Use with the direction property 1. white-space: processing Method of spaces in objects: nowrap control text unwrap pre blank will be reserved by the browser normal default status pre-line merge blank reserved linefeed pre-wrap reserved blank normal line feed nowrap often works with text-overflow used together, to display the excess part as a ellipsis, the main overflow must be set to hidden, as shown below:
<! DOCTYPE html> As shown in the following figure: You can add p: hover {normal;} to the style. In this way, when the excess part is displayed as a ellipsis and the cursor is placed over p, the complete content is displayed. Let's look at several other attributes:
<! DOCTYPE html> The following figure shows the image description. If the element content is not out of the range, the effect of pre and pre-wrap is the same. There is a difference only when the content is out of the range. pre does not automatically wrap the content, the pre-wrap will automatically wrap at the element boundary. 2. direction: text stream direction ltr text from left to right rtl text from right to left
<Html lang = "en"> Result: image description 3 and unicode-bidi are used to display texts read from different directions on the same page. Bidi-override is used with the direction attribute in strict order of the value of the <'direction'> attribute. Ignore implicit bidirectional operation rules. The default unicode-bidi attribute value is normal. In addition, several attribute values are added in CSS3: isolate, isolate-override, and plaintext are examples of only bidi-override :( unicode-bidi attributes are frequently used in projects)
<! DOCTYPE html> The effect is as follows: Write the image description here. CSS3 adds text attributes. 1. color: rgba (); 2. text-overflow: Indicates whether to use an omitted mark (...) Overflow of text in objects. 3. text-align: text align. 4. text-transform: case-sensitive. 5. text-decoration: Decorative line of text, composite attribute 6. text-shadow: text shadow 7. text-fill-color: text fill color 8. text-stroke: Composite attribute. Set stroke 9, tab-size: tab length 10, word-wrap: whether to disconnect the line when the current row exceeds the boundary of the specified container 1, rgba () r red 0-255g green 0-255 B blue 0-255 a alpha transparency 0-1 rgba increases transparency than rgb. Previously we used opacity to set transparency, however, using opacity makes the text transparent, while rgba does not, as follows:
<! DOCTYPE html> Result: Image Description 2. text-overflow: whether to use an omitted mark (...) Clip: Default Value: ellipsis without ellipsis (...) indicates overflow of text in an object (...). Note: This attribute must be used with over-flow: hidden (beyond processing) and white-space: nowrap (line feed prohibited, otherwise, you cannot see the effect. This section already has an example when we talk about white-space. 3. text-align: Specifies the text alignment mode. css1 left: The default value is left-aligned. right: right-aligned. center: justify: The content is aligned at both ends. Css3 start: start boundary alignment end: end boundary alignment (related to the direction of the text stream. If the direction of the text stream is from right to left, start is the right and end is the left)
<! DOCTYPE html> Here, write the image description 4. text-transform: text case-sensitive css1 none: Default Value: no conversion capitalize: Convert the first letter of each word to uppercase: Convert to uppercase lowercase: convert to lowercase css3 full-width: Set the left and right characters to the full-width format. Full-size-kana is not supported: Convert all katakana to normal. For example, Turkish. These attribute values can be clearly described in the description, without examples. 5. text-decoration: Decorative line of text, composite attribute text-decoration-line: specifies the type of text decoration. It is equivalent to the text-decoration attribute of CSS1. none: specifies that the text is not decorated. underline: specifies that the text is decorated with underscores overline: specifies that the text is decorated with line-through: specify text decoration as the text-decoration-style: Specify the text decoration style. Solid: solid line double: double line dotted: dot line dashed: dotted line wavy: wavy line text-decoration-color: Specifies the color of text decoration. Usage: text-decoration: # F00 double overline
<! DOCTYPE html> Image Description 6, text-shadow: text shadow; optional values: x y blur color ,...... X horizontal offset y vertical offset blur fuzzy distance (grayscale) color shadow color
<! DOCTYPE html> Text-fill-color: text fill color is not compatible, currently only supported by Google.
<! DOCTYPE html> Here, the image description is 8. text-stroke: Composite attribute. Set the stroke text-stroke-width: The stroke thickness of the text-stroke-color: The stroke color of the text.
<! DOCTYPE html> Here, the image description 9 and tab-size are written. The default value of the tab character length is 8 (the space byte length of a tab key). Only 10 and word-wrap are displayed in the pre tab: if the current row exceeded the boundary of the specified container, whether to disconnect the container. normal: the default value allows the content to expand or overflow the specified container boundary. Break-word: the content will wrap in the boundary. If necessary, the word can be broken internally.
<!DOCTYPE html>In view of the compatibility of CSS3, you can search for the supported browser version on the caniuse website.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
