文本设置

1 文本对齐

  • text-align 文本水平对齐方式。

    取值:

    left: 内容左对齐。

    center: 内容居中对齐。

    right: 内容右对齐。

    justify: 内容两端对齐。

    start: 内容对齐开始边界。(CSS3) (CSS3中规定的默认值)

    end: 内容对齐结束边界。(CSS3)

  • text-align-last 文本最后一行的对齐方式(如果只有一行,既是第一行,也是最后一行)CSS3新增属性

    取值:

    auto: 无特殊对齐方式。 (默认值)

    left: 内容左对齐。

    center: 内容居中对齐。

    right: 内容右对齐。

    justify: 内容两端对齐。

    start: 内容对齐开始边界。

    end: 内容对齐结束边界。

  • vertical-align 文本在行框内的垂直对齐方式

    取值:

    baseline: 把当前盒的基线与父级盒的基线对齐。如果该盒没有基线,就将底部外边距的边界和父级的基线对齐 (默认值)

    sub: 把当前盒的基线降低到合适的位置作为父级盒的下标(该值不影响该元素文本的字体大小)

    super: 把当前盒的基线提升到合适的位置作为父级盒的上标(该值不影响该元素文本的字体大小)

    text-top: 把当前盒的top和父级的内容区的top对齐

    text-bottom: 把当前盒的bottom和父级的内容区的bottom对齐

    middle: 把当前盒的垂直中心和父级盒的基线加上父级的半x-height对齐

    top: 把当前盒的top与行盒的top对齐

    bottom: 把当前盒的bottom与行盒的bottom对齐

    <percentage>: 把当前盒提升(正值)或者降低(负值)这个距离,百分比相对line-height计算。当值为0%时等同于baseline。

    <length>: 把当前盒提升(正值)或者降低(负值)这个距离。当值为0时等同于baseline。

2 文本阴影

  • text-shadow 设置文本阴影

    text-shadow:none | <shadow> [ , <shadow> ]* <shadow> = <length>{2,3} && <color>?
    

    取值:

    none: 无阴影 (默认值)

    length①: 第1个长度值用来设置对象的阴影水平偏移值。可以为负值

    length②: 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值

    length③: 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值

    color: 设置对象的阴影的颜色。

3 文本溢出

  • text-overflow 设置文本内容溢出容器时的状态

    取值:

    clip: 当内联内容溢出块容器时,将溢出部分裁切掉。 (默认值)

    ellipsis: 当内联内容溢出块容器时,将溢出部分替换为(...)。

    注意:

    要使得 text-overflow 属性生效,块容器必须显式定义 overflow 为非 visible 值, white-spacenowrap 值。

4 文本换行

  • word-wrap / overflow-wrap 设置内容超过指定容器的边界时是否断行。

    取值:

    normal: 允许内容顶开或溢出指定的容器边界。 (默认值)

    break-word: 内容将在边界内换行,如果需要,单词内部允许断行。它要求一个没有断行破发点的词必须保持为一个整体单位,如果当前行无法放下需要被打断的单词,为了保持完整性,会将整个单词放到下一行进行展示。这与word-break的break-word值效果相同

    注意

    IE5.5率先实现了word-wrap,后期被w3c采纳成标准属性;

    CSS3中将word-wrap改名为overflow-wrap

  • word-break 文本的字内换行行为。

    取值:

    normal: 默认的换行规则。依据各自语言的规则,允许在字间发生换行。 (默认值)

    keep-all: 对于 CJK(中文,韩文,日文)文本不允许在字符内发生换行。Non-CJK 文本表现同normal

    break-all: 对于 Non-CJK 文本允许在任意字符内发生换行。该值适合包含一些非亚洲文本的亚洲文本,比如使连续的英文字符断行。

    break-word: 与break-all 相同,不同的地方在于它要求一个没有断行破发点的词必须保持为一个整体单位。这与 word-wrap 的 break-word 值效果相同

  • white-space 设置元素是否保留文本间的空格、换行;指定文本超过边界时是否换行。

    取值:

    normal: 默认处理方式。会将序列的空格合并为一个,内部是否换行由换行规则决定。 (默认值)

    pre: 原封不动的保留你输入时的状态,空格、换行都会保留,并且当文字超出边界时不换行。等同 pre 元素效果

    nowrap: 与normal值一致,不同的是会强制所有文本在同一行内显示。

    pre-wrap: 与pre值一致,不同的是文字超出边界时将自动换行。

    pre-line: 与normal值一致,但是会保留文本输入时的换行。

    注意: 控制文本断行,该属性是最常用的

5 文本装饰

  • text-decoration CSS3变成了复合属性

    text-decoration:text-decoration-line || text-decoration-style || text-decoration-color
    

    注意:

    所有浏览器均支持 CSS2.1 中的text-decoration属性,在CSS3中,该属性定义被移植到其新的分解属性 text-decoration-line 上;

  • text-decoration-line 设置文本装饰线的位置

    取值:

    none: 指定文字无装饰 (默认值)

    underline: 指定文字的装饰是下划线

    overline: 指定文字的装饰是上划线

    line-through: 指定文字的装饰是贯穿线

    blink: 指定文字的装饰是闪烁。

  • text-decoration-style 文本装饰线条的形状

    取值:

    solid: 实线 (默认)

    double: 双线

    dotted: 点状线条

    dashed: 虚线

    wavy: 波浪线

  • text-decoration-color 文本装饰线条的颜色

6 文本描边

文字描边功能仅 webkit 内核浏览器支持

  • -webkit-text-fill-color 定义文字填充色

    注意:

    若同时设置 -webkit-text-fill-colorcolor 属性,-webkit-text-fill-color 定义的颜色将覆盖 color 定义。

  • -webkit-text-stroke-width 设置文字描边的宽度,取长度单位。

  • -webkit-text-stroke-color 设置文字描边的颜色,取颜色单位。

  • -webkit-text-stroke 复合属性,设置文字描边宽度和颜色。

7 其他文本设置

  • text-transform 设置文本如何转换大小写。

    取值:

    none: 无转换

    capitalize: 将每个单词的第一个字母转换成大写

    uppercase: 将每个单词转换成大写

    lowercase: 将每个单词转换成小写

  • tab-size 设置内容中制表符的长度。 取值长度单位。

    取值:

    number: 用整数值指定制表符的长度。不允许负值。 代表空格的倍数(如:tab-size:4; 表示制表符宽度是4个空格的宽度) 。

    length:用长度值指定制表符的长度。不允许负值。

    注意:

    只有当white-space 的属性值为:pre | pre-wrap时,该属性的定义才有效 。

results matching ""

    No results matching ""