css3 text note_html/css_WEB-ITnose-HTML Tutorial-php.cn

css3 text note_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:41:11

Original

1153 people have browsed it

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

Copy after login

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>

Copy after login

text-overflow

Set text overflow

text-overflow:clip | ellipsis

Copy after login

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>

Copy after login

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;}

Copy after login

ellipsis effect

div{   width:100px;   border:1px solid;   text-overflow:ellipsis;   overflow:hidden;   white-space:nowrap;}

Copy after login

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

Copy after login

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>

Copy after login

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

Copy after login

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>

Copy after login

By default, URL addresses and long words will not wrap automatically.

    div{       width:100px;       border:1px solid;       word-break:break-all;    }

Copy after login

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>

Copy after login

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

Copy after login

Normal: Default value, blank spaces will be ignored by the browser.
Pre: Blank spaces will be retained by the browser. It behaves like the

 tag in HTML. <br /> nowrap: The text will not wrap. The text will continue on the same line until the <br> tag is encountered. <br /> pre-wrap: Keep the whitespace sequence, but wrap normally. <br /> pre-line: merge whitespace sequences but retain newlines. <br /> Inherit: Specifies that the value of the white-space attribute should be inherited from the parent element. </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui"><!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>

Copy after login

By default (normal), whitespace characters are merged, carriage returns are ignored, and newlines are automatically wrapped.

When the value is pre, blank characters and carriage returns are retained, and line breaks are not automatically performed.

When the value is pre-wrap, whitespace characters and carriage return characters are retained and new lines are automatically wrapped.

When the value is pre-line, blank characters are merged, carriage returns are retained, and new lines are automatically wrapped.