CSS文本_html/css_WEB-ITnose

目录

[1]文字阴影 [2]首行缩进 [3]水平对齐 [4]垂直对齐 [5]字间隔 [6]字母间隔 [7]文本转换 [8]文本修饰 [9]空白符 [10]文本换行 [11]文本溢出 [12]文本方向

文字阴影(IE8-不支持)

text-shadow:none(默认)text-shadow:[颜色color] x轴位移(x-offset) y轴位移(y-offset) 模糊半径(blur-radius),*

　　[注意]不要加太多层阴影，会有性能问题

【文字阴影代码查看】

首行缩进

text-indent:0(默认值)text-indent:具体值(可以为负值)text-indent:x%(相对于包含块的宽度)text-indent:2em(2个汉字的字体大小)

　　[注意]text-indent只可用于块级元素，且可继承

【悬挂缩进】

div{    width: 200px;    border: 1px solid black;    text-indent: -1em;//关键代码    padding-left: 1em;//关键代码}

【首字下沉】

<style>div{    width: 200px;    border: 1px solid black;    text-indent: 0.5em;}div:first-letter{    font-size: 30px;    float: left;}  

水平对齐

text-align: left(左对齐)text-align: right(右对齐)text-align: center(居中对齐)text-align: justify(两端对齐)(IE浏览器无效)

　　[注意]text-align只应用于块级元素，且可继承

div:nth-child(1){text-align: left;}div:nth-child(2){text-align: right;}div:nth-child(3){text-align: center;}div:nth-child(4){text-align: justify;}

垂直对齐

【1】行高
　　line-height属性是指文本行基线之间的距离
　　行间距 = line-height - font-size

line-height: normal;(默认) line-height: 100%/1em/16px;(%相对于元素的字体大小)line-height: 1;(1表示缩放因子，相对于当前元素的字体大小)

　　[注意]行高适用于任何元素，且可继承

【2】垂直对齐文本

vertical-align:baseline(基线对齐)vertical-align:sub(下标)vertical-align:super(上标)vertical-align:bottom(底端)vertical-align:text-bottom(文本底端)vertical-align:top(顶端)vertical-align:text-top(文本顶端)vertical-align:middle(居中)vertical-align:(+-n)px(元素相对于基线上下偏移npx)vertical-align:x%(相对于元素的line-height值)

　　[注意]vertical-align只用于行内元素和替换元素，且不可继承

字间隔(单词间距)

word-spacing:normal(默认normal=0)word-spacing:具体值(可为负值)

　　[注意]单词之间用空格分开，单词之间的间距 = word-spacing + 空格大小

字母间隔(字符间距)

letter-spacing: normal(默认normal=0)letter-spacing: 具体值(可为负值)

　　[注意]word-spacing和letter-spacing都可用于所有元素，且可继承

文本转换

text-transform:none(默认)text-transform:uppercase(全大写)text-transform:lowercase(全小写)text-transform:capitalize(首字母大写)

　　[注意]text-transform可用于所有元素，且可继承

文本修饰

text-decoration: none(默认，无修饰)text-decoration: overline(上划线)text-decoration: line-through(中划线或删除线)text-decoration: underline(下划线)

　　[注意]text-decoration可用于所有元素，但不可继承

空白符(IE7-不支持pre-wrap和pre-line)

　　空白符是指空格、制表符和回车；HTML默认会把所有空白符合并成一个空格

white-space:normal;(默认)white-space:pre;(保留空白符,且防止文本换行)white-space:nowrap;(防止文本换行)white-space:pre-wrap;(保留空白符，文本正常换行)white-space:pre-line;(合并空白符，但保留换行符)

　　[注意]white-space可用于所有元素，但不可继承

<div>They can stay 72-hours     within the Shandong      province after they have entered China via the Qingdao International Airport.</div>

文本换行

word-wrap:normal(默认)word-wrap:break-word(截断单词换行,长单词从下一行开始)word-break:normal(默认)word-break:break-all(截断单词换行,长单词占据当前行剩余空间)word-break:keep-all(不允许截断单词[包括汉语],长单词从下一行开始)

文本溢出

text-overflow:clip(文本裁剪)text-overflow:ellipsis(显示省略标志)

　　【常用文本溢出代码】

text-overflow:ellipsis;//显示省略标志 white-space:nowrap;//强制不换行overflow: hidden;//溢出隐藏

文本方向(IE8-不支持)

direction:ltr(normal,left to right)direction:rtl(right to left)unicode-bidi:normalunicode-bidi:embedunicode-bidi:bidi-override