Shulou(Shulou.com)06/01 Report--

This article mainly introduces "what are the attributes of the CSS3 text module". In the daily operation, I believe many people have doubts about the attributes of the CSS3 text module. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts about "what attributes the CSS3 text module has". Next, please follow the editor to study!

CSS2.1 's text module includes basic attributes such as text-align, line-height, and text-decoration, while css3 adds a variety of enhanced text effects, including text shadow, text overflow, and text wrapping.

Text shadows: text-shadow

In the age of CSS2.1, you couldn't add shadows to text unless you used pictures. Now you can use the text-shadow property to add shadows to the text.

Text shadows have the following two formats:

Text-shadow: [color] horizontal offset vertical offset [blur radius]

Text-shadow: horizontal offset Longitudinal offset [blur Radius] [Color]

Where color and blur radius are optional values. When the color is not specified, it is the same as the text color; when the blur radius is not specified, its value is 0.

You can overlay multiple text shadows, separated by commas, for example:

Text-shadow:2px2px6pxorange,3px-2px4pxblue

Note that in Chrome, the shadow blur of text-shadow will affect the clarity of the text because it blurs the text, while other browsers behave normally.

Text overflow: text-overflow

Text-overflow is used to set how to omit the overflowed content when the text in the container overflows. In the past, to achieve this, you had to use complex JavaScript code.

Text overflow can be set to two values, clip (which means intercept in English) and ellipsis (which means ellipsis in English). Clip indicates that the text is simply trimmed on the display according to the overflow boundary; ellipsis means that when the text overflows, an ellipsis is displayed in the overflow, which can only be used for a horizontal line of text.

Note that text-overflow must be used with overflow:hidden to work. Text-overflow:ellipsis has problems with block-level elements, and browser support varies from browser to browser, so be sure not to use text-overflow:ellipsis on elements that contain block-level elements such as DIV.

Text wrapping: word-wrap

Microsoft was the first to put forward the text wrapping attribute. CSS3 provides support for this attribute, allowing long words to wrap between segments. It has two values to choose from, normal and break-word. Normal is the default value, which means that there is no line break between segments, and a long word will continue to be displayed after it exceeds the container boundary.

Break-word causes a word to break between segments and wrap.

At this point, the study of "what are the attributes of the CSS3 text module" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.