Heim > Artikel > Web-Frontend > css3 文本记_html/css_WEB-ITnose
css3 文本记_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:41:111121Durchsuche
css3 文本
在css文本功能上主要分为三大类：字体，颜色和文本。
text-shadow
设置文本阴影
text-shadow:color x-offset y-offset blur-radius
color:阴影颜色，可选。
x-offset:x轴偏移量，其值为正，阴影在右边，其值为负，阴影在左边。
y-offset:y轴偏移量，其值为正，阴影在下边，其值为负，阴影在上边。
blur-radius:阴影模糊半径，可选，代表阴影向外模糊的模糊范围。
还可以为文本指定多个阴影，中间使用逗号分隔。
<!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
设置文本溢出
text-overflow:clip | ellipsis
clip:文本溢出时剪切其内容。
ellipsis:文本溢出时显示省略号标记(...)。
<!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> 可以看出，单纯的设置文本溢出并没有任何效果，因为自动换行，盒子的高度被内容撑开了，所以我们强制文本不换行(white-space:nowrap)。并设置溢出属性为隐藏(overflow:hidden)。
div{ width:100px; border:1px solid; text-overflow:clip; overflow:hidden; white-space:nowrap;} ellipsis效果
div{ width:100px; border:1px solid; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;} 最后一个字符被替换成了省略号。
word-wrap
可以看出，浏览器没有制止URL地址换行，它强行溢出了盒子边框，使用word-wrap可以实现长单词与URL地址的自动换行。
word-wrap:normal | break-word
normal:默认值，浏览器只在半角空格或连字符的地方进行换行。
break-word:将内容在边界内换行。
<!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> 可见，URL地址在边框边缘处强制换行了。
word-break
使用word-break属性来决定自动换行的处理方法。通过具体的属性设置，不仅可以让浏览器实现半角空格或连字符后面的换行，而且还可以让浏览器实现任意位置的换行。
word-break:normal | break-all | keep-all
word-break属性用于设置或检索对象内文本的字内换行行为，在出现多种语言的情况下尤其有用。
normal:默认值，使用浏览器默认的换行规则。
break-all:允许在单词内换行。
keep-all:只能在半角空格或连字符处换行。
<!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> 默认情况，URL地址与长单词不会自动换行。
div{ width:100px; border:1px solid; word-break:break-all; } 当值为break-all时，与word-wrape的值为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> 当值为keep-all时，只在空格处实行换行。
white-space
用来处理元素中的空白符。
white-spcae:normal || pre || nowrap || pre-line || pre-wrap || inherit
normal:默认值,空白会被浏览器忽略。
pre:空白会被浏览器保留。其行为方式类似 HTML 中的
标签。<br> nowrap:文本不会换行，文本会在在同一行上继续，直到遇到<br>标签为止。<br> pre-wrap:保留空白符序列，但是正常地进行换行。<br> pre-line:合并空白符序列，但是保留换行符。<br> inherit:规定应该从父元素继承 white-space 属性的值。 <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> 默认时(normal)，空白符合并，回车符忽略，自动换行。
div{ width:100px; border:1px solid; white-space:pre;} 当值为pre时，保留空白符与回车符，不自动换行。
div{ width:100px; border:1px solid; white-space:pre-wrap;} 当值为pre-wrap时，保留空白符与回车符，自动换行。
div{ width:100px; border:1px solid; white-space:pre-line;} 当值为pre-line时，空白符合并，回车符保留，自动换行。
css3文本完。然学习之路，却不止