CSS 再学习，文本处理

文本缩进（对p，div有效；对span无效）

p {text-indent: 5em;}

Tips：一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素（span），图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。

使用百分比

text-indent 可以使用所有长度单位，包括百分比值。

百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为 20%，所影响元素的第一行会缩进其父元素宽度的 20%。

在下例中，缩进值是父元素的 20%，即 100 个像素：

div {width: 500px;}
p {text-indent: 20%;}
<div>
<p>this is a paragragh</p>
</div>

继承

text-indent 属性可以继承

<html>
<head>
<style type="text/css">
div#outer {width: 500px;background-color:red;}
div#inner {text-indent: 10%;}
p {width: 200px;}
</style>
</head>
<body>
<div id="outer">
<div id="inner">some text. some text. some text.
<p>this is a paragragh.</p>
</div>
</div>
</body>
</html>

text-align ,对行内元素span无效。

Tips:将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现。

<html>
<head>
<style type="text/css">
div {width:500px;background-color:red;}
p {text-align:center;}
</style>
</head>
<body>
<div>
<p>this is a paragragh.</p>
</div>
</body>
</html>

基于父元素居中，对行内元素无效。

<html>
<head>
<style type="text/css">
div {width:500px;background-color:red;}
span {text-align:center;display:block;}
</style>
</head>
<body>
<div>
<span>this is a paragragh.</span>
</div>
</body>
</html>

Span加上display:block;就能变为块状元素。

word-spacing

<html>
<head>
<style type="text/css">
span.spread {word-spacing: 10px;}
p.tight {word-spacing: -0.5em;}
</style>
</head>
<body>
<span class="spread">This is some text. This is some text.</span>
<p class="tight">This is some text. This is some text.</p>
</body>
</html>

与行内元素，块状元素都有效。

text-transform

none
uppercase
lowercase
capitalize

不变动，全部大写，全部小写，首字母大写。

<html>
<head>
<style type="text/css">
  h1 {text-transform: uppercase}
  span.uppercase {text-transform: uppercase}
  p.lowercase {text-transform: lowercase}
  p.capitalize {text-transform: capitalize}
</style>
</head>
<body>
<h1>This Is An H1 Element</h1>
<span class="uppercase">This is some text in a paragraph.</span>
<p class="lowercase">This is some text in a paragraph.</p>
<p class="capitalize">This is some text in a paragraph.</p>
</body>
</html>

对行内元素，块状元素都有效。

文本装饰

<html>
<head>
<style type="text/css">
  p.none {text-decoration: none}
  span.underline {text-decoration: underline}
  p.overline {text-decoration: overline}
  p.line-through {text-decoration: line-through}
  p.blink {text-decoration: blink}
</style>
</head>
<body>
<p class="none">This is some text in a paragraph.</p>
<span class="underline">This is some text in a paragraph.</span>
<p class="overline">This is some text in a paragraph.</p>
<p class="line-through">This is some text in a paragraph.</p>
<p class="blink">This is some text in a paragraph.</p>
</body>
</html>

blink是让文本闪烁，浏览器不一定支持。

white-space

对源文档中的空格、换行和 tab 字符的处理。

p {white-space: normal;}

上面的规则告诉浏览器按照平常的做法去处理：丢掉多余的空白符。如果给定这个值，换行字符（回车）会转换为空格，一行中多个空格的序列也会转换为一个空格。

<html>
<head>
<style type="text/css">
p {white-space: normal;}
</style>
</head>
<body>
<p>This     paragraph has    many
    spaces           in it.</p>
<p>注释：当 white-space 属性设置为 normal 时，会合并所有的空白符，并忽略换行符。</p>
</body>
</html>

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

<html>
<head>
<style type="text/css">
p {white-space: pre-line;}
</style>
</head>
<body>
<p>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>
<p>注释：当 white-space 属性设置为 pre-line 时，浏览器会保留换行符，并允许自动换行，但是会合并空白符，这是与 pre-wrap 值的不同之处。</p>
</body>
</html>

值	空白符	换行符	自动换行
pre-line	合并	保留	允许
normal	合并	忽略	允许
nowrap	合并	忽略	不允许
pre	保留	保留	不允许
pre-wrap	保留	保留	允许