常见文本样式 | 天赋创新的blog

缩进和对齐

缩进文本

text-indent属性规定了一个块级元素内首行文本内容（含行内元素）之前应该有多少水平空格

数值可以为正，也可以为负或者百分数，举个例子：

Some of us get dipped in flat, some in satin, some in gloss.... But every once in a while you find someone who's iridescent, and when you do, nothing will ever compare.

1	<div>Some of us get dipped in flat, some in satin, some in gloss.... But every once in a while you find someone who's iridescent, and when you do, nothing will ever compare.</div>

div {
    text-indent: 2em;
    /* text-indent: 10%; */
    /* text-indent: -2em; */
}

text-indent可以被继承

Some of us get dipped in flat, some in satin, some in gloss....

But every once in a while you find someone who's iridescent, and when you do, nothing will ever compare.

<div class="text">
  <div>Some of us get dipped in flat, some in satin, some in gloss.... </div>
  <div>But every once in a while you find someone who's iridescent, and when you do, nothing will ever compare.</div>
</div>

1
2
3

.text {
    text-indent: 2em;
}

文本横向对齐

text-align可以用于设置块级元素内的水平对齐方式，常见的属性取值有left、right和center

Some of us get dipped in flat, some in satin, some in gloss.... But every once in a while you find someone who's iridescent, and when you do, nothing will ever compare.

1	<div>Some of us get dipped in flat, some in satin, some in gloss.... But every once in a while you find someone who's iridescent, and when you do, nothing will ever compare.</div>

div {
    text-align: left;
    /* text-align: center; */
    /* text-align: right; */
}

还有其他几种取值：

start和end

这两个属性是CSS3新增的，同时start成为了新的text-align的默认值

当文本方向是从左到右，那么start与left作用相同，同理，如果文本方向是从右向左，那么start与right相同；end反之

Some of us get dipped in flat, some in satin, some in gloss.... But every once in a while you find someone who's iridescent, and when you do, nothing will ever compare.
1
<div>Some of us get dipped in flat, some in satin, some in gloss.... But every once in a while you find someone who's iridescent, and when you do, nothing will ever compare.</div>
1
2
3
4
div {
text-align: start;
/* text-align: end; */
}
两端对齐justify

Some of us get dipped in flat, some in satin, some in gloss....But every once in a while you find someone who's iridescent, and when you do, nothing will ever compare.
1
<div>Some of us get dipped in flat, some in satin, some in gloss.... But every once in a while you find someone who's iridescent, and when you do, nothing will ever compare.</div>
1
2
3
div {
text-align: justify;
}

如果想单独为元素的最后一行设置不同的样式，可以使用text-align-last属性

Some of us get dipped in flat, some in satin, some in gloss.... But every once in a while you find someone who's iridescent, and when you do, nothing will ever compare.

1	<div>Some of us get dipped in flat, some in satin, some in gloss.... But every once in a while you find someone who's iridescent, and when you do, nothing will ever compare.</div>

div {
    text-align-last: left;
    /* text-align-last: center; */
    /* text-align-last: right; */
    /* text-align-last: justify; */
}

只要一行后面有强制换行，不管是否在元素末尾，都受text-align-last属性的控制

Some of us get dipped in flat, some in satin, some in gloss....
But every once in a while you find someone who's iridescent, and when you do, nothing will ever compare.

1
2
3

<div>
  Some of us get dipped in flat, some in satin, some in gloss....<br>But every once in a while you find someone who's iridescent, and when you do, nothing will ever compare.
</div>

div {
    text-align: start;
    text-align-last: end;
}

需要注意的是，该属性不支持 Safari

文本纵向对齐

行高

行之间的距离受行高的影响，line-height属性指行的基线之间的距离，与字号无关

对于块级元素，line-height定义元素中文本行基线之间的最小距离，基线之间的距离也可能比line-height大

line-height控制的是行距，是除字体高度之外在文本行上方的额外空间，line-heigh的值与字体高度之差就是行距

Some of us get dipped in flat, some in satin, some in gloss.... But every once in a while you find someone who's iridescent, and when you do, nothing will ever compare.

div {
    line-height: 20px;
    /* line-height: 1.5em; */
    /* line-height: 200%; */
    /* line-height: 1.2; */
    font-size: 16px;
}

如上所示，line-height的取值可以是长度值，也可以是百分比或纯数字，在多数情况下首选纯数字

使用纯数字在继承时，继承的是设定的换算系数，而如果是百分比或者em，则继承的是计算后的值

Some of us get dipped in flat, some in satin, some in gloss....But every once in a while you find someone who's iridescent, and when you do, nothing will ever compare.

<div class="outer">
  <div class="inner">
    <p>Some of us get dipped in flat, some in satin, some in gloss....But every once in a while you find someone who's iridescent, and when you do, nothing will ever compare.</p>
  </div>
</div>

.outer {
    font-size: 10px;
}
.inner {
    line-height: 1.5;
    /* line-height: 100%; */
}
.inner p {
    font-size: 18px;
}

对齐

vertical-align用来指定行内元素或表格单元格元素的垂直对齐方式，不能被继承

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐方式，默认值为 baseline

Some of us get dipped in flat, some in satin, some in gloss....But every once in a while you find

someone who's iridescent, and when you do, nothing will ever compare.

基线对齐

baseline可以使元素的基线与父元素的基线对齐，若为图片，则图片底边与父元素基线对齐
1
2
3
img {
vertical-align: baseline;
}
基线对齐是vertical-align的默认值
上标和下标

super可以使元素的基线（图片的底边）高于父元素的基线，sub可以使元素的基线（图片的底边）低于父元素的基线

高出或低于的距离由用户代理决定
1
2
3
4
img {
vertical-align: super;
/* vertical-align: sub; */
}
底端对齐

bottom将元素所在的内容区的底边与行框所在的底边对齐，text-bottom使元素的底部与父元素的字体底部对齐
1
2
3
4
img {
vertical-align: bottom;
/* vertical-align: text-bottom; */
}
顶端对齐

top将元素所在的内容区的顶边与行框所在的顶边对齐，text-top使元素的顶部与父元素的字体顶部对齐
1
2
3
4
img {
vertical-align: top;
/* vertical-align: text-top; */
}
中间对齐

middle可以使元素的中部与父元素的基线加上父元素x高度的一半对齐
1
2
3
img {
vertical-align: middle;
}
百分比

把元素的基线（图片的底边）相对父元素的基线上升（取负值为下降）指定的量，指定的百分数相对元素自身计算
长度值

把元素的基线（图片的底边）相对父元素的基线上升（取负值为下降）指定的量

间距和大小写转换

单词间距

word-spacing可以用于修改单词之间的距离，其值为长度，可正可负，默认值为normal，等同于把间隔设为 0

Some of us get dipped in flat, some in satin, some in gloss .... But every once in a while you find someone who's iridescent, and when you do, nothing will ever compare.

div {
    word-spacing: normal;
    /* word-spacing: 0.5em; */
    /* word-spacing: -0.5em; */
}

字符间距

letter-spacing可以用于修改字符或者字母之间的距离，其值为长度，可正可负，默认值为normal，等同于把间隔设为 0

Some of us get dipped in flat, some in satin, some in gloss .... But every once in a while you find someone who's iridescent, and when you do, nothing will ever compare.

div {
    letter-spacing: normal;
    /* letter-spacing: 0.2em; */
    /* letter-spacing: -0.2em; */
}

大小写转换

text-transform属性可以改变文本的大小写，有四种取值

uppercase lowercase

将文本转换为大写字母和小写字母
capitalize

只把各单词的首字母变成大写，不同的用户代理可能以不同的方式确定单词的起点
none

默认值，不对文本做任何修改

Some of us get dipped in flat, some in satin, some in gloss .... But every once in a while you find someone who's iridescent, and when you do, nothing will ever compare.

文本装饰

text-decoration可以为文本设置装饰性的线条，是text-decoration-line，text-decoration-color和text-decoration-style的简写

1
2
3

div {
    text-decoration: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>;
}

text-decoration-line

text-decoration-line可以取值为underline、overline、line-through和none，其中none是默认值，可以同时取多个值

Some of us get dipped in flat, some in satin, some in gloss .... But every once in a while you find someone who's iridescent, and when you do, nothing will ever compare.
1
2
3
4
5
6
div {
text-decoration-line: underline;
/* text-decoration-line: overline; */
/* text-decoration-line: line-through; */
/* text-decoration-line: underline overline; */
}

text-decoration-style

该属性可以设置装饰线条的样式，包括solid、double、dotted、dashed和wavy

Some of us get dipped in flat, some in satin, some in gloss .... But every once in a while you find someone who's iridescent, and when you do, nothing will ever compare.

div {
    text-decoration-line: underline;
    text-decoration-style: solid;
    /* text-decoration-style: double; */
    /* text-decoration-style: dotted; */
    /* text-decoration-style: dashed; */
    /* text-decoration-style: wavy; */
}

text-decoration-color

设置装饰线的颜色

Some of us get dipped in flat, some in satin, some in gloss .... But every once in a while you find someone who's iridescent, and when you do, nothing will ever compare.
1
2
3
4
div {
text-decoration-line: underline;
text-decoration-color: red;
}

以上三个属性可以合并于text-decoration中

Some of us get dipped in flat, some in satin, some in gloss .... But every once in a while you find someone who's iridescent, and when you do, nothing will ever compare.

div {
    -webkit-text-decoration: underline wavy red;
            text-decoration: underline wavy red;
}

文本阴影

text-shadow为文字添加阴影。可以为文字与text-decoration添加多个阴影，阴影值之间用逗号隔开

每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成

Some of us get dipped in flat, some in satin, some in gloss .... But every once in a while you find someone who's iridescent, and when you do, nothing will ever compare.

1
2
3

div {
    text-shadow: gray 5px 5px;
}

Some of us get dipped in flat, some in satin, some in gloss .... But every once in a while you find someone who's iridescent, and when you do, nothing will ever compare.

1
2
3

div {
    text-shadow: red 10px 2px, blue -10px 8px;
}

Some of us get dipped in flat, some in satin, some in gloss .... But every once in a while you find someone who's iridescent, and when you do, nothing will ever compare.

1
2
3

div {
    text-shadow: gray 5px 5px 2px;
}

处理空白

white-space属性会影响用户代理对文档中空格、换行符和制表符的处理

normal （默认）

white-space设置为normal时会丢掉多余的空白，换行符变成空白，同时连续的多个空格变成一个空格，允许自动换行
pre

设置为pre时保留文本中的换行符和多余的空格，并禁止自动换行
nowrap

nowrap与pre相反，禁止文本中的换行并去除多余的空格，同时也禁止自动换行
pre-wrap pre-line

这两个属性都保留换行符并且允许自动换行，不同的是，前者保留多余的空白，后者相反

<div>
  I love you.
  I love you, too.</br>
  I    love   you three          thousand. I    love   you three          thousand. I    love   you three          thousand. I    love   you three          thousand.
</div>

I love you. I love you, too.
I love you three thousand. I love you three thousand. I love you three thousand. I love you three thousand.

div {
    white-space: normal;
    /* white-space: pre; */
    /* white-space: nowrap; */
    /* white-space: pre-wrap; */
    /* white-space: pre-line; */
}