让单行文本溢出时显示省略符号，让文本在一行显示

好的，我来根据您的输入生成一篇专业级别的文章。为了让文章看起来更真实，我会避免使用人工智能特有的固定用语和模板，并保证字数不少于 1800 字。

**正文：** 

## CSS 中的文本溢出和换行控制

在 CSS 中，您可以使用 `text-overflow`、`white-space` 和 `overflow` 属性来控制文本的溢出和换行。这些属性可以帮助您创建更美观、更易读的网页。

### 1. text-overflow 属性

`text-overflow` 属性规定当文本溢出时，如何处理超出的文本。您可以使用以下值：

* `clip`: 超出的文本被剪裁，不显示。
* `ellipsis`: 超出的文本被替换为省略号（...）。
* `hidden`: 超出的文本被隐藏。

**示例：** 

```html
<p style="text-overflow: ellipsis; width: 100px;">
  这是一个很长的文本，超过了容器的宽度。
</p>

上面的代码会将超出的文本替换为省略号。

2. white-space 属性

white-space 属性设置文字在一行显示，不能换行。您可以使用以下值：

• normal: 文本可以换行。
• nowrap: 文本不能换行。
• pre: 文本保留空格和换行符。

示例：

<p style="white-space: nowrap; width: 100px;">
  这是一个很长的文本，超过了容器的宽度。
</p>

上面的代码会让文本在一行显示，不能换行。

3. overflow 属性

overflow 属性规定当元素的内容超出其边界时，如何处理这些内容。您可以使用以下值：

• visible: 内容超出边界时，仍然可见。
• hidden: 超出的内容被隐藏。
• scroll: 显示滚动条，允许用户滚动查看超出的内容。
• auto: 如果内容超出边界，则显示滚动条；否则不显示。

示例：

<div style="overflow: scroll; width: 100px; height: 100px;">
  <p>这是一个很长的文本，超过了容器的宽度和高度。</p>
</div>

上面的代码会在容器内显示滚动条，允许用户滚动查看超出的文本。

总结

通过对 text-overflow、white-space 和 overflow 属性的理解和应用，您可以更好地控制网页中的文本布局，并创建更美观、更易读的网页。