CSS文本样式：换行处理、溢出处理、首行缩进

本文主要介绍CSS文本样式中的换行处理、溢出处理、首行缩进等相关技巧，并提供易于理解的代码案例。

1. 换行处理

在CSS中，文本的换行处理可以通过white-space属性来控制。该属性有三种可选值：

• normal：默认值，表示忽略换行符，将文本连成一行。
• pre：表示保留换行符，按照文本中的换行符进行换行。
• nowrap：表示不允许换行，文本会在同一行上继续显示。

代码示例：

p {
  white-space: pre;
}

该示例将p元素的文本保留换行符进行换行。

2. 溢出处理

在CSS中，文本的溢出处理可以通过text-overflow属性来控制。该属性有两种可选值：

• clip：默认值，表示溢出的文本直接被截断，不显示溢出部分。
• ellipsis：表示溢出的文本以省略号（...）表示。

需要注意的是，该属性只在以下条件下生效：

• 元素必须有固定的宽度（width属性或max-width属性）。
• 元素必须有溢出的文本（overflow属性值为hidden或scroll）。
• 元素的文本必须是单行显示。

代码示例：

p {
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

该示例将p元素的文本宽度设置为100px，溢出的文本以省略号表示。

3. 首行缩进

在CSS中，文本的首行缩进可以通过text-indent属性来控制。该属性的值可以是一个长度值或百分比值。

代码示例：

p {
  text-indent: 2em;
}

该示例将p元素的文本首行缩进2个字符宽度。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： CSS图像样式：边框样式、圆角、缩放、裁剪
• 下一篇： CSS滤镜效果：模糊、灰度、饱和度、透明度