标签：word 空格 ora ack indent 转换 play 标签 单位
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>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;就能变为块状元素。
<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>
与行内元素，块状元素都有效。
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是让文本闪烁，浏览器不一定支持。
对源文档中的空格、换行和 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 | 保留 | 保留 | 允许 |
标签：word 空格 ora ack indent 转换 play 标签 单位
原文地址：https://www.cnblogs.com/jiqing9006/p/10178978.html
