CSS文本属性学习笔记

发表于 | 分类于

文本样式

对齐

text-align 属性设定文本对齐方式。可取的值：

  • left：文本左对齐（默认）。
  • right：文本右对齐。
  • center：文本居中。
  • justify：文本两端对齐。


1
2
3
4
5
6
<body>
    <p style="text-align: left;">...</p>
    <p style="text-align: right;">...</p>
    <p style="text-align: center;">...</p>
    <p style="text-align: justify;">...</p>
</body>

text-align:justify 不会作用于最后一行及单行文字。
text-justify 属性设定当文本左右对齐时的对齐规则。可取的值：

  • auto：浏览器决定齐行规则（默认）。
  • none：禁用齐行。
  • inter-word：空白分布在单词之间。（适用于英语）
  • inter-ideograph：空白分布在单词、表意字之间、且文本两端对齐。（适用于汉语、韩语）
  • inter-cluster：空白分布在单词、字形集的边界。（适用于泰语）
  • distribute：空白分布在单词、字形集的边界，连续文本除外。
  • kashida：通过拉伸字符来调整对齐方式。

文本方向

direction 属性设置文本方向。可取的值：ltr（从左到右）、rtl（从右到左）。

1
2
3
4
<body>
    <p style="direction: ltr;">...</p>
    <p style="direction: rtl;">...</p>
</body>

首行缩进

text-indent 属性指定文本首行缩进。可取的值：长度值（正值和负值）、百分比（相对于缩进元素的父元素）。

1
2
3
4
<body>
    <p style="text-indent: 20px;">...</p>
    <p style="text-indent: -20px;">...</p>
</body>

单词间距、字母间距、行高

letter-spacing 属性设置字母之间的间距。值可取：nromal、长度值。
word-spacing 属性设置单词之间的间距。 值可取：nromal、长度值。

1
2
3
4
5
6
<body>
    <p style="letter-spacing: 3px;">...</p>
    <p style="letter-spacing: -3px;">...</p>
    <p style="word-spacing: 3px;">...</p>
    <p style="word-spacing: -3px;">...</p>
</body>

line-height 属性设置行高。值可取：nromal、长度值、百分比。

1
2
3
4
<body>
    <p style="letter-spacing: 10px;">...</p>
    <p style="letter-spacing: 40px;">...</p>
</body>

空白符

white-space 属性设置元素中空白的处理方式。可取的值：

  • normal：忽略空白（默认）。
  • pre：保留空白。
  • nowrap：强制文本不换行，直到遇到 br 为止。
  • pre-wrap：保留空白符，文本会正常进行换行。
  • pre-line：压缩空白符，文本会正常进行换行。


1
2
3
4
5
6
7
<body> 
	<p class="p1">Let   life   be   beautiful   like    summer   flowers and death like autumn leaves.</p>
	<p class="p2">Let   life   be   beautiful   like    summer   flowers and death like autumn leaves.</p>
	<p class="p3">Let   life   be   beautiful   like    summer   flowers and death like autumn leaves.</p>
	<p class="p4">Let   life   be   beautiful   like    summer   flowers and death like autumn leaves.</p>
	<p class="p5">Let   life   be   beautiful   like    summer   flowers and death like autumn leaves.</p>
</body>

1
2
3
4
5
6
7
8
9
10
.p1 {
    white-space: normal;}
.p2 {
    white-space: pre;}
.p3 {
    white-space: nowrap;}
.p4 {
    white-space: pre-wrap;}
.p5 {
    white-space: pre-line;}

断词

word-wrap 属性规定长单词或是URL是否换行到下一行。可取的值：normal（单词不断开，默认）、break-word（断开单词）。

1
2
3
4
<body> 
	<p style="word-wrap: normal;">pneumonoultramicroscopicsilicovolcanoconiosis，[医]肺尘病,矽肺病。共有45个英文字母。</p>
	<P style="word-wrap: break-word;">pneumonoultramicroscopicsilicovolcanoconiosis，[医]肺尘病,矽肺病。共有45个英文字母。</p>  
</body>

大小写转换

text-transform 属性为文本转换大小写。可取的值：

  • none：标准的文本（默认）。
  • capitalize：文本每个单词以大写字母开头。
  • uppercase：文本全是大写字母。
  • lowercasw：文本全是小写字母。


1
2
3
4
5
6
<body>
    <p style="text-transform: none;">...</p>
    <p style="text-transform: capitalize;">...</p>
    <p style="text-transform: uppercase;">...</p>
    <p style="text-transform: lowercase;">...</p>
</body>

文本装饰

text-decoration 属性为文本设置装饰。可取的值：

  • none：标准的文本（默认）。
  • underline：文本下的一条线。
  • overline：文本上的一条线。
  • line-through：横穿文本的一条线。
  • blink：闪烁的文本。


1
2
3
4
5
6
<body>
    <p style="text-decoration: none;">text-decoration:none</p>
    <p style="text-decoration: underline;">text-decoration:underline</p>
    <p style="text-decoration: overline;">text-decoration:overline</p>
    <p style="text-decoration: line-through;">text-decoration:line-througn</p>
</body>

文本阴影

text-shadow 属性为文本添加阴影。

1
text-shadow: h-shadow v-shadow blur color;

  • h-shadow：水平阴影的位置，可取正值或负值（必需）。
  • v-shadow：垂直阴影的位置，可取正值或负值（必需）。
  • blur：模糊距离（可选）。
  • color：阴影的颜色（可选）。


1
2
3
4
5
6
7
<body>
    <span style="text-shadow: 0 0 10px gray;">shadow</span>
    <span style="text-shadow: 0 0 5px gray;">shadow</span>
    <span style="text-shadow: 5px 0 5px gray;">shadow</span>
    <span style="text-shadow: 0 -5px 5px gray;">shadow</span>
    <span style="text-shadow: 0 0 5px aqua;">shadow</span>
</body>