CSS 简明教程 - 文本 ( Text ) 属性

yufei       2 年, 4 月 前       230

CSS 中有些属性用于定制文本的外观,包括但不限于 text-aligntext-decorationtext-transformtext-indent,使用这些属性,我们可以更改文本的 对齐方式间距缩进

文本水平对齐方式 ( text-align )

CSS text-align 属性用于设置文本的水平对齐方式

该属性有三个可选的值,分别是

说明
left 把文本排列到左边。默认值:由浏览器决定
right 把文本排列到右边
center 把文本排列到中间
justify 实现两端对齐文本效果
inherit 规定应该从父元素继承 text-align 属性的值

以下代码显示了左对齐,右对齐和居中对齐的文本

h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

h3 {
    text-align: right;
}

注意:如果语言方向是从左到右,则保留 text-align 的默认值,也就是 left; 如果语言方向是从右到左,则 text-align 的默认值是 right

我们还可以设置 text-align 的属性值 justify,在两边对齐 justify 文本中,每行文本的开始和结束单词位于父元素的左右边界,中间单词自动调整间距,使每行的长度相同

div {
    text-align: justify;
}

文本缩进 ( text-indent )

CSS text-indent 属性可以将元素的第一行缩进一定长度,长度值可以为负

我们经常会在 <p> 元素上使用 text-indent 属性来缩进段落中的第一行文本,例如,以下 CSS 规则将所有段落的第一行缩进 5em

p {
    text-indent: 5em;
}

注意:text-indent 属性仅适用于块级元素,不能应用于内联元素

文本装饰 ( text-decoration )

接下来,我们将讨论 text-decoration 属性,这是一个有趣的属性,提供了许多非常有趣的行为

text-decoration 属性有以下 5 个值

说明
none 默认。定义标准的文本
underline 定义文本下的一条线
overline 定义文本上的一条线
line-through 定义穿过文本下的一条线
blink 定义闪烁的文本
inherit 规定应该从父元素继承 text-decoration 属性的值

经常用到的是 text-decoration:none;,用于设置文本不需要任何装饰,它通常用于删除链接文本的下划线

text-decoration 属性的其它值则用于下划线,上划线,删除线和闪烁文本

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}

h4 {
    text-decoration: blink;
}

文字转换 ( text-transform )

text-transform 属性可以更改文本的大小写

该属性有以下四个可选值

说明
none 默认。定义带有小写字母和大写字母的标准的文本
capitalize 文本中的每个单词以大写字母开头
uppercase 定义仅有大写字母
lowercase 定义无大写字母,仅有小写字母
inherit 规定应该从父元素继承 text-transform 属性的值

下面的代码是使用 text-transform 属性的范例

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

单词间距 ( word-spacing )

word-spacing 属性会更改文本中每个单词的间距。默认值为 normal0

如果 word-spacing 属性值为正数,则单词间距增加,否则,单词空间将拉近

例如

<style>
p.spread {
    word-spacing: 30px;
}
p.tight {
    word-spacing: -0.5em;
}
</style>

<p class="spread">
This is a paragraph. The spaces between words will be increased.
</p>

<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>

注意:这里的 「 单词 」 ( word ) 一词是指由空格字符包围的非空白字符串,没有任何实际的语义

字母间距 ( letter-spacing )

letter-spacing 属性用于指定文本中字符之间的空白,默认值为 normail0

如果 letter-spacing 属性值为正数,则字符间距增加,否则,字符空间将拉近

下面的代码用于演示如何增加或减少字符之间的间距

<style>
h1 {
    letter-spacing: -0.5em
}
h4 {
    letter-spacing: 20px
}
</style>

<h1>This is header 1</h1>
<h4>This is header 4</h4>

空白 ( white-space)

white-space 属性控制文本中的空格和换行符的显示方式

可选的值有

说明
normal 默认。空白会被浏览器忽略
pre 空白会被浏览器保留。其行为方式类似 HTML 中的
 标签
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到
标签为止
pre-wrap 保留空白符序列,但是正常地进行换行
pre-line 合并空白符序列,但是保留换行符
inherit 规定应该从父元素继承 white-space 属性的值

pre

默认情况下,浏览器会将多个连续的空格缩短为一个空格,但是可以使用 pre 来保持原样的多个空格

<style>
p {
    white-space: pre;
}
</style>

<p>这     个段落 有    许多的
    空           格</p>

这时候, <p> 元素的效果相当于 <pre> 元素

nowrap

如果将 white-space 属性值设置为 nowrap,则浏览器将阻止文本换行,除非使用了 <br> 元素

例如

<style>
p{
    white-space: nowrap
}
</style>

<p>
这里是一些文本。
这里是一些文本。
这里是一些文本。
这里是一些文本。
这里是一些文本。
这里是一些文本。
这里是一些文本。
</p>

pre-wrappre-line

如果将 white-space 属性值设置为 pre-wrap,浏览器不仅会保留空格,还会支持文本换行,也就是支持换行符 ( \n\r\n\r )

如果将 white-space 属性值设置为 pre-line ,浏览器将合并空格,但它仍支持自动文本换行

例如

<html>
<head>
<meta charset="utf-8" />
<style>
p.pre-wrap {
    white-space: pre-wrap;
}
p.pre-line {
    white-space: pre-line;
}
</style>
</head>
<body>

<h1>white-space: pre-wrap</h1>
<p class="pre-wrap">This     paragraph has    a  great    many  s p a c e s   with
its textual  content, but their    preservation     will  not prevent
line   wrapping or line breaking.</p>

<h1>white-space: pre-line</h1>
<p class="pre-line">This     paragraph has    a  great    many  s p a c e s   with
its textual  content, but their    collapse     will  not prevent
line   wrapping or line breaking.</p>

</body>
</html>

文本方向 direction

direction 属性用于控制文本的输出方向

direction 可选的值有

描述
ltr 默认。文本方向从左到右
rtl 文本方向从右到左
inherit 规定应该从父元素继承 direction 属性的值

direction 属性有两个值 ltrrtldirection 属性的默认值是 ltr,这意味着文本从左到右输出。 如果希望从右向左输出文本,则应将 direction 属性设置为 rtl

目前尚无回复
简单教程 = 简单教程,简单编程
简单教程 是一个关于技术和学习的地方
现在注册
已注册用户请 登入
关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.