CSS属性学习:(十)文本-Text

text-transformwhite-spacetab-sizeword-breakword-wrapoverflow-wraptext-aligntext-align-lasttext-justify

text-transform


类型: Text

默认值: none

取值: none | capitalize | uppercase | lowercase | full-width

适用于: 所有元素

取值

none:无转换
capitalize:将每个单词的第一个字母转换成大写
uppercase:将每个单词转换成大写
lowercase:将每个单词转换成小写
full-width:将所有字符转换成fullwidth形式。如果字符没有相应的fullwidth形式,将保留原样。这个值通常用于排版拉丁字符和数字等表意符号。(CSS3)

demo

See the Pen gwWkNa by yrq110 (@yrq110) on CodePen.


white-space


类型: Text

默认值: normal

取值: normal | pre | nowrap | pre-wrap | pre-line

适用于: 所有元素

取值

normal:默认处理方式。
pre:用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字超出边界时不换行。可查阅pre对象`nowrap:强制在同一行内显示所有文本,合并文本间的多余空白,直到文本结束或者遭遇br对象。
pre-wrap:用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字碰到边界时发生换行。
pre-line:保持文本的换行,不保留文字间的空白距离,当文字碰到边界时发生换行。

demo

See the Pen ZpKwQj by yrq110 (@yrq110) on CodePen.


tab-size


类型: Text

默认值: 8

取值: <integer> | <length>

适用于: 块容器

取值

<integer>:用整数值指定制表符的长度。不允许负值。
<length>:用长度值指定制表符的长度。不允许负值。

demo

See the Pen pEPGya by yrq110 (@yrq110) on CodePen.

文章目录
  1. 1. text-transform
    1. 1.1. 取值
    2. 1.2. demo
  2. 2. white-space
    1. 2.1. 取值
    2. 2.2. demo
  3. 3. tab-size
    1. 3.1. 取值
    2. 3.2. demo
|