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	保留	保留	允许