缩进文本 text-indent
注释:允许使用负值。如果使用负值,那么首行会被缩进到左边。会产生一种“悬挂缩进”的效果。
值 | 描述 |
---|---|
length | 定义固定的缩进。默认值:0。 |
% | 定义基于父元素宽度的百分比的缩进。 |
inherit | 规定应该从父元素继承 text-indent 属性的值。 |
可继承
单词间隔 word-spacing
定义
word-spacing 属性增加或减少单词间的空白(即字间隔)。
该属性定义元素中字之间插入多少空白符。针对这个属性,“字” 定义为由空白符包围的一个字符串。如果指定为长度值,会调整字之间的通常间隔;normal 就等同于设置为 0。负长度值,会让字之间挤得更紧。
提示和注释
注释:CSS 把“字(word)”定义为任何非空白符字符组成的串,并由某种空白字符包围。这个定义没有实际的语义,它只是假设一个文档包含由一个或多个空白字符包围的字。支持 CSS 的用户代理不一定能确定一个给定语言中哪些是合法的字,而哪些不是。尽管这个定义没有多大价值,不过它意味着采用象形文字的语言或非罗马书写体往往无法指定字间隔。
提示:利用这个属性,可能会创建字间隔太宽的文档,所以,使用 word-spacing 时要小心。
字母间隔 letter-spacing
与 word-spacing 的区别在于,字母间隔修改的是字符或字母之间的间隔。
字符转换 text-transform
处理文本的大小写
取值
- none
- uppercase 全大写
- lowercase 全小写
- capitalize 每个单词的首字母大写
文本装饰 text-decoration
- none
- underline 下划线
- overline 上划线
- line-through 删除线
- blink
处理空白符 white-space
值 | 描述 |
---|---|
normal | 默认。空白会被浏览器忽略。 |
pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
nowrap | 文本不会换行,文本会在在同一行上继续,直到遇到 标签为止。 |
pre-wrap | 保留空白符序列,但是正常地进行换行。 |
pre-line | 合并空白符序列,但是保留换行符。 |
inherit | 规定应该从父元素继承 white-space 属性的值。 |
可以影响浏览器处理字之间和文本行之间的空白符的方式
值 | 描述 |
---|---|
normal | 默认。空白会被浏览器忽略。 |
pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
nowrap | 文本不会换行,文本会在在同一行上继续,直到遇到 标签为止。 |
pre-wrap | 保留空白符序列,但是正常地进行换行。 |
pre-line | 合并空白符序列,但是保留换行符。 |
inherit | 规定应该从父元素继承 white-space 属性的值。 |
值 | 空白符 | 换行符 | 自动换行 |
---|---|---|---|
pre-line | 合并 | 保留 | 允许 |
normal | 合并 | 忽略 | 允许 |
nowrap | 合并 | 忽略 | 不允许 |
pre | 保留 | 保留 | 不允许 |
pre-wrap | 保留 | 保留 | 允许 |
下面的表格总结了 white-space 属性的行为:
值 | 空白符 | 换行符 | 自动换行 |
---|---|---|---|
pre-line | 合并 | 保留 | 允许 |
normal | 合并 | 忽略 | 允许 |
nowrap | 合并 | 忽略 | 不允许 |
pre | 保留 | 保留 | 不允许 |
pre-wrap | 保留 | 保留 | 允许 |
文本颜色 color
形式
- 十六进制值 - 如: #FF0000
- 一个RGB值 - 如: RGB(255,0,0)
- 颜色名称 - 如: red
W3C标准的CSS:如果定义了颜色属性,还必须定义背景色属性。
文本对齐方式 text-align
文本排列属性是用来设置文本的水平对齐方式。
取值
- left 默认值:由浏览器决定
- right
- center
- justify
- inherit 规定应该从父元素继承 text-align 属性的值。
默认值:如果 direction 属性是 ltr,则默认值是 left;如果 direction 是 rtl,则为 right。
文本方向 direction
影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。
取值
- ltr 默认。文本方向从左到右。
- rtl 文本方向从右到左。
- inherit 从父元素继承 direction 属性的值。
行高 line-height
说明
该属性会影响行框的布局。在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。
line-height 与 font-size 的计算值之差(行间距)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
取值
值 | 描述 |
---|---|
normal | 默认。设置合理的行间距。 |
number | 该系数会与当前的font-size相乘来设置行间距。 |
length | 固定的行间距。 |
% | 基于当前字体尺寸的百分比行间距。 |
inherit | 规定应该从父元素继承 line-height 属性的值。 |
CSS3文本属性
文本阴影 text-shadow
可规定水平阴影、垂直阴影、模糊距离,以及阴影的颜色
语法
text-shadow: h-shadow v-shadow blur color;
自动换行word-wrap
语法
word-break: normal|break-all|keep-all;
值 | 描述 |
---|---|
normal | 使用浏览器默认的换行规则。 |
break-all | 允许在单词内换行。 |
keep-all | 只能在半角空格或连字符处换行。 |
单词太长的话就可能无法超出某个区域:
word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分: