css3文本设置:
1.文本对齐
①.text-align:center; 文本水平对齐方式。
left: 内容左对齐。
center: 内容居中对齐。
right: 内容右对齐。
justify: 内容两端对齐。
start: 内容对齐开始边界。(CSS3) (CSS3中规定的默认值)
end: 内容对齐结束边界。(CSS3)
②.text-align-last:center; 文本最后一行的对齐方式(如果只有一行,既是第一行,也是最后一行)它是CSS3新增属性。
auto: 无特殊对齐方式。 (默认值)
剩余值和text-align一样。
③.vertical-align: baseline;设置文字基于基线的对齐方式
baseline 基线 默认值
top把当前盒的top和父级的内容区的top对齐
bottom把当前盒的bottom与行盒的bottom对齐
middle 把此元素放置在父元素的中部。
作用:文字和图片在一行显示,vertical-align:middle;
inline-block的元素在一行显示,有的有内容,有的没内容;vertical-align:bottom;
表格的单元格,vertical-align可以控制文字在单元格的垂直对齐方式。
2.文本阴影
text-shadow 设置文本阴影
none: 无阴影 (默认值)
text-shadow: 2px 2px;只设置水平垂直偏移值,阴影和文字颜色一样。
text-shadow: 3px 3px orange;让阴影和文字颜色不一样,设置文字阴影颜色。
text-shadow最多设置4个值。
text-shadow: 3px 3px 5px orange;
水平偏移值(可为负值)
垂直偏移值(可为负值)
阴影模糊值(不允许负值)
阴影颜色
3.文本溢出
text-overflow:ellipsis; 设置文本内容溢出容器时的状态
clip: 当内容溢出块容器时,将溢出部分裁切掉。(默认值)
ellipsis: 当内容溢出块容器时,将溢出部分替换为省略号。(…)。
注意:要使得 text-overflow 属性生效,必须先设置文字不换行和盒子溢出隐藏。
white-space: nowrap;设置文字不换行
overflow: hidden;设置盒子溢出隐藏
text-overflow: ellipsis;设置溢出文本的处理
4.文本换行
①.white-space 设置元素是否保留文本间的空格、换行;指定文本超过边界时是否换行。
<pre></pre>标签中的文字会原样显示。
white-space:normal; 默认处理方式。会将序列的空格合并为一个。
white-space:nowrap; 与normal一致,不同的是它强制不换行。
white-space:pre-line; 与normal一致,但是会保留文本输入时的换行。
white-space:pre; 原封不动的保留你输入时的状态,空格、换行都会保留,并且当文字超出边界时不换行。等同 pre 元素效果。
white-space:pre-wrap; 与pre一致,不同的是文字超出边界时将自动换行。
②.word-wrap / overflow-wrap 设置内容超过指定容器的边界时是否换行。
只影响英文,不影响中文。
overflow-wrap/word-wrap:noraml;(默认值)一个长单词超出边界也不换行
overflow-wrap/word-wrap:break-word;一个长单词超出边界换行
③.word-break 文本的字内换行行为。(了解)
word-break: noraml;中文正常换行显示
word-break:keep-all;中文里若没有空格或者标点符号,就不换行。不太适合
5.文本装饰
text-decoration CSS3变成了复合属性。
text-decoration-line 设置文本装饰线的位置
none:指定文字无装饰 (默认值)
underline:下划线。 overline:上划线。 line-through:中划线。
text-decoration-style 文本装饰线条的形状
solid:实线 (默认)。 double: 双线。
dotted: 点状线条。 dashed: 虚线。
wavy: 波浪线。
text-decoration-color 文本装饰线条的颜色
复合属性:text-decoration: line-through solid red;
6.文本描边
文字描边功能仅 webkit 内核浏览器支持
-webkit-text-stroke-color: red;设置文字描边的颜色,取颜色单位。
-webkit-text-stroke-width: 2px;设置文字描边的宽度,取长度单位。
-webkit-text-stroke:3px #fff;复合属性,设置文字描边宽度和颜色。
7.其它文本设置
①.text-transform 设置文本如何转换大小写。
text-transform: none;无转换
text-transform: capitalize;将每个单词的第一个字母转换成大写
text-transform: uppercase;将每个字母转换成大写
text-transform: lowercase;将每个字母转换成小写
②.tab-size 设置内容中制表符的长度。 取值长度单位。(了解)
默认一个table是4个空格,webstrom会把tab转换成4个空格。
tab-size:8; 表示制表符宽度是8个空格的宽度。
tab-size: 100px;用长度值指定制表符的长度。不允许负值。
注意:只有当white-space 的属性值为:pre | pre-wrap时,该属性的定义才有效。
