文本缩进（对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
noneuppercaselowercasecapitalize不变动，全部大写，全部小写，首字母大写。
<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 ??withits textual ?content, but their ???collapse ????will ?not preventline ??wrapping or line breaking.</p><p>注释：当 white-space 属性设置为 pre-line 时，浏览器会保留换行符，并允许自动换行，但是会合并空白符，这是与 pre-wrap 值的不同之处。</p></body></html>| 值 | 空白符 | 换行符 | 自动换行 |
|---|---|---|---|
| pre-line | 合并 | 保留 | 允许 |
| normal | 合并 | 忽略 | 允许 |
| nowrap | 合并 | 忽略 | 不允许 |
| pre | 保留 | 保留 | 不允许 |
| pre-wrap | 保留 | 保留 | 允许 |
CSS 再学习，文本处理
原文地址：https://www.cnblogs.com/jiqing9006/p/10178978.html