Home > Article > Web Front-end > css3 text note_html/css_WEB-ITnose
css3 text note_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:41:111123browse
css3 text
The css text function is mainly divided into three categories: font, color and text.
text-shadow
Set text shadow
text-shadow:color x-offset y-offset blur-radius
Color: Shadow color, optional.
x-offset: x-axis offset. If its value is positive, the shadow is on the right. If its value is negative, the shadow is on the left.
y-offset: y-axis offset. When the value is positive, the shadow is at the bottom. When the value is negative, the shadow is at the top.
blur-radius: Shadow blur radius, optional, represents the blur range of the shadow blurring outward.
You can also specify multiple shadows for the text, separated by commas.
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ text-shadow:2px 2px 1px red, 4px 4px 1px yellow, 6px 6px 1px blue, 8px 8px 1px black; }</style></head><body> <div>胸无大志者，必受制于人</div></body></html> text-overflow
Set text overflow
text-overflow:clip | ellipsis
clip: Clip the text when it overflows.
ellipsis: Display ellipsis mark (...) when the text overflows.
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width:100px; border:1px solid; text-overflow:clip; }</style></head><body> <div>胸无大志者，必受制于人胸无大志者，必受制于人胸无大志者，必受制于人</div></body></html> It can be seen that simply setting text overflow has no effect. Because of automatic line wrapping, the height of the box is stretched by the content, so we force the text not to wrap (white -space:nowrap). And set the overflow attribute to hidden (overflow:hidden).
div{ width:100px; border:1px solid; text-overflow:clip; overflow:hidden; white-space:nowrap;} ellipsis effect
div{ width:100px; border:1px solid; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;} The last character is replaced with an ellipsis.
word-wrap
It can be seen that the browser does not prevent the URL address from wrapping. It forcibly overflows the box border. Use word-wrap to achieve long words and URLs. Automatic line wrapping of addresses.
word-wrap:normal | break-word
Normal: Default value, the browser only wraps lines in half-width spaces or hyphens.
Break-word: Break the content within the boundary.
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width:100px; border:1px solid; word-wrap:break-word; }</style></head><body> <div>http://www.baidu.com胸无大志者，必受制于人胸无大志者，必受制于人胸无大志者，必受制于人</div></body></html> It can be seen that the URL address is forced to wrap at the edge of the border.
word-break
Use the word-break attribute to determine the processing method of automatic line wrapping. Through specific attribute settings, the browser can not only implement line breaks after half-width spaces or hyphens, but also allow the browser to implement line breaks at any position.
word-break:normal | break-all | keep-all
The word-break attribute is used to set or retrieve the intra-word breaking behavior of the text within the object, which is especially useful in the case of multiple languages.
Normal: Default value, using the browser’s default line wrapping rules.
break-all: Allow line breaks within words.
Keep-all: Only line breaks at half-width spaces or hyphens.
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width:100px; border:1px solid; word-break:normal; }</style></head><body> <div>https://www.baidu.com胸无大志者，必受制于人胸无大志者，xixihahasuisuiniannian必受制于人胸无大志者，必受制于人</div></body></html> By default, URL addresses and long words will not wrap automatically.
div{ width:100px; border:1px solid; word-break:break-all; } When the value is break-all, the effect is similar to the word-wrape value of word-break.
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width:100px; border:1px solid; word-break:keep-all; }</style></head><body> <div>https://www.baidu.com 胸无大志者，必受制于人 胸无大志者，必受制于人 胸无大志者，必受制于人</div></body></html> When the value is keep-all, line breaks are only performed on spaces.
white-space
Used to handle whitespace characters in elements.
white-spcae:normal || pre || nowrap || pre-line || pre-wrap || inherit
Normal: Default value, blank spaces will be ignored by the browser.
Pre: Blank spaces will be retained by the browser. It behaves like the e03b848252eb9375d56be284e690e873 tag in HTML.
nowrap: The text will not wrap. The text will continue on the same line until the 0c6dc11e160d3b678d68754cc175188a tag is encountered.
pre-wrap: Keep the whitespace sequence, but wrap normally.
pre-line: merge whitespace sequences but retain newlines.
Inherit: Specifies that the value of the white-space attribute should be inherited from the parent element.
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width:100px; border:1px solid; white-space:normal; }</style></head><body><div>https://www.baidu.com 胸无大志者，必 受制于人 胸无大志者，必受制 于人 胸无大志者，必受制于人</div></body></html> By default (normal), whitespace characters are merged, carriage returns are ignored, and newlines are automatically wrapped.
div{ width:100px; border:1px solid; white-space:pre;} When the value is pre, blank characters and carriage returns are retained, and line breaks are not automatically performed.
div{ width:100px; border:1px solid; white-space:pre-wrap;} When the value is pre-wrap, whitespace characters and carriage return characters are retained and new lines are automatically wrapped.
div{ width:100px; border:1px solid; white-space:pre-line;} When the value is pre-line, blank characters are merged, carriage returns are retained, and new lines are automatically wrapped.
css3 text completed. However, the road to learning is not limited to