css处理文字不换行、换行截断、溢出省略号

## 1. 不换行处理

在网页设计中，文字只需要在达到一定长度时自动换行，这是非常有用的。然而，有时候我们需要让一段文本强制不换行（比如图片、链接、代码块等）。在CSS中，有多种方法可以处理文字不换行，下面我们来逐一介绍。

1.1 white-space属性

使用CSS的white-space属性设置行为，可以在不换行的情况下显示文本。例如，可以使用以下代码：

.not-break {
  white-space: nowrap;
}

将white-space属性的值设置为nowrap时，文本将不会自动换行。

1.2 word-wrap属性

使用word-wrap属性允许在单词内换行。这样可以确保单词不会被截断，以避免出现不必要的空格或断字。

.word-break {
  word-wrap: break-word;
}

将word-wrap属性的值设置为break-word时，文本将在单词内自动换行。

## 2. 换行截断

在某些情况下，您可能希望以某种方式限制文本的长度。有时，您可能只希望显示文本的一部分，而将其余部分隐藏。为达到这个目的，可以使用以下CSS属性。

2.1 text-overflow属性

该text-overflow属性指定当内容溢出在元素框内时如何显示，主要用于限制文本的长度。例如可以使用以下代码：

.truncate {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

将text-overflow属性的值设置为ellipsis，指定当文本溢出元素框时将显示省略号。

## 3. 溢出省略号

另一种更常见的方式是在内容溢出时添加省略号。这是一种在可用空间有限时优雅地隐藏文本的方式。以下CSS属性可用于在内容溢出时省略文本。

3.1 text-overflow属性

该text-overflow属性指定当内容溢出在元素框内时如何显示，主要用于限制文本的长度。例如可以使用以下代码：

.ellipses {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

在这个例子中，white-space属性设置为nowrap，以防止换行，并将overflow属性设置为hidden，以确保文本不会溢出元素框。

## 结论

本文从不换行、换行截断以及溢出省略号三个方面介绍了CSS中处理文字的方法。这些方法可以确保在设计网站时文本长度不会超过可接受程度，并且能够更好地控制文本的显示。