从零学CSS系列之文本属性

【长沙网络推广整理】CSS基础教程案例系列

一、理解line-height属性

当我们谈论CSS的排版时，`line-height`属性是一个不可忽视的关键点。这个属性允许我们为元素指定一个缩放因子，这个因子不带单位，后代元素会继承这个缩放因子，并根据自身的字号大小来计算行高。例如，如果我们为body设置`font-size: 12px; line-height: 1.5;`，那么body的行高为18px。对于h1标签，其行高则会是54px（36px字体大小乘以1.5的行高比例）。即使使用相对单位如em或百分比，后代元素继承的仍然是计算后的行高值。值得注意的是，当使用相对单位指定body的行高时，并不影响后代元素默认的行高计算方式。

二、掌握text-decoration属性

`text-decoration`是处理文本修饰如下划线、上划线等的属性。值得注意的是，尽管该属性默认不继承，但祖先元素上的文本修饰会“延伸”到后代元素中。这意味着如果一个段落（p标签）有下划线，即使其内部的span标签设置了无下划线，span标签内的文本仍然会有下划线的延续效果。由于这种属性的延伸可能造成兼容性问题，最佳实践是给需要修饰的文本单独设置text-decoration属性。

三、熟练运用text-indent属性

`text-indent`属性用于控制文本的首行缩进，可以用它来实现段落的首行缩进效果而不是使用空格。例如，设置`p { text-indent: 2em; }`可以使段落的首行缩进两个字符的宽度。还可以指定一个负数的值来产生首行悬挂的效果。这种技巧在处理引号或特殊布局时尤为有用。还有一种常见应用是当需要隐藏文本时使用大负值进行缩进，例如使用`text-indent: -9999px;`来隐藏图像替换文本。这种方法常用于图像作为logo的场合，通过设置背景图像和尺寸等属性来创建具有特定尺寸的logo，同时利用大负值缩进隐藏原始文本。需要注意的是，某些浏览器（如IE6/7）可能不支持某些属性值（如inline-block），因此在实际应用中需要根据需求选择合适的布局方式或使用其他替代方法。通常情况下，当文本内容超出其容器界限时，我们可以使用一系列CSS属性来优雅地处理这种情况。这些属性不仅能让页面看起来更整洁，还能提升用户体验。

1. text-overflow: ellipsis

当文本内容超出容器边界时，我们可以使用 `text-overflow: ellipsis` 来显示省略号表示文本被隐藏。为了让这个属性生效，必须配合 `overflow: hidden` 使用。对于某些浏览器（如IE 6），可能还需要设定一个宽度。这样一来，强制文本在一行内显示，以达到预期效果。

示例代码：

```css

li {

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

```

2. text-shadow

`text-shadow` 可以在非白色背景的深色文字上实现漂亮的内嵌效果。你可以为文本添加多个阴影效果，只需用逗号分隔。

示例代码：

```css

text-shadow: 0 1px 0 rgba(255,255,255,.75); / 单个阴影效果 /

text-shadow: 0 1px 0 fff, 0 2px 0 ddd, 0 3px 0 ddd, 0 4px 0 ddd; / 多个阴影效果 /

```

3. white-space

`white-space` 属性用于设置如何处理元素内的空白。如果你希望文本在同一行上继续，即使遇到边界也不换行，可以使用 `white-space: nowrap`。在展示计算机源代码时，为了保留文本的空格和换行符，可以使用 `white-space: pre`。为了兼容不支持 `pre-wrap` 的浏览器，还需要配合其他CSS属性使用。

示例代码：

```css

white-space: nowrap; / 文本不换行 /

pre { white-space: pre; } / 保留源代码的空格和换行符 /

```

4. word-break 和 word-wrap

在处理长文本或连续字符时，`word-break` 和 `word-wrap` 是非常有用的属性。不过需要注意的是，不同的浏览器对于某些值的支持可能会有所不同。例如，对于 `word-break: keep-all`，某些浏览器可能不支持。此时可以使用 `word-wrap: break-word` 作为替代方案。为了避免恶意的连续字符导致的阅读障碍，可以添加 `overflow: hidden` 来隐藏溢出的内容。

示例代码：

```css

word-break: break-all; / 断词换行 /

word-wrap: break-word; / 优先断词而不是字母 /

overflow: hidden; / 避免恶意连续字符导致的溢出 /

```

通过合理使用这些CSS属性，我们可以优雅地处理文本溢出问题，提升网页的视觉效果和用户体验。