Text overflow text-overflow and text shadow text-shadow-small match Blue ideal

Text overflow text-overflow and text shadow text-shadow-small match Blue ideal

* Directory [1] Text overflow [2] Text shadow

Previous

CSS3 adds some text styles, including text-overflow text overflow and text-shadow text shadow. They have the corresponding overflow attribute and the box-shadow box shadow attribute. This article will detail the overflow and shadow attributes of these two functions in the text.

Text Overflow

Generally, when people mention text overflow, they think of the classic code of text overflow.

white-space: nowrap;overflow: hidden;text-overflow: ellipsis;

But in fact, Text wrap does not have to use white-space; overflow attribute values do not have to use hidden.

Definition

Text-overflow

Value: clip | ellipsis

Initial Value: clip

Applies to: block-level elements, replacement elements, and table cells.

Inheritance: None

Clip: do not show the omitted mark (...), simple cropping, equivalent to ineffective ellipsis: when the text overflows, the omitted mark (...) is displayed (...), the last character is inserted.

[Note] When the text overflow attribute is applied to a table cell, you must set table-layout: fixed.

[Note] This property is compatible with mainstream IE 6 + browsers and mobile iso and android

Implementation

[1] When long English text exists, the prerequisite for the text-overflow attribute to take effect is

Overflow (or overflow-y or overflow-x): hidden | auto | scroll

[2] when the text is a Chinese character, the prerequisite for the text-overflow attribute to take effect is

Word-break: keep-all; or white-space: nowrap; overflow (or overflow-y or overflow-x): hidden | auto | scroll

Text shadow

Similar to the box shadow, text shadow has four values: X axis offset, Y axis offset, blur radius, and shadow color, but there is no shadow size or internal shadow.

Definition

Text-shadow

Value: none | (h-shadow v-shadow blur color) +

Initial Value: none

Apply to: All elements

Inheritance: None

H-shadow: horizontal shadow position (required) v-shadow: vertical shadow position (required) blur: fuzzy distance (this value cannot be negative, optional) color: shadow color, the default value is the same as the text color (optional)

[Note] This attribute is not supported by the browser.

// Multi-layer shadow text-shadow: 1px 1px blue, 5px 5px 5px red;

[Note] do not add too many shadows, which may cause performance problems.

Common effects

[View text shadow Code]