在CSS（层叠样式表）中，控制文本的显示方式是一项重要的任务，特别是当文本内容过多，需要在有限的空间内展示时。本篇将详细解释如何利用CSS实现文本的越界省略号显示以及自动换行。
我们来看如何实现越界省略号的效果。这个效果通常用于长文本在有限的容器内无法完全展示时，用省略号(...)来表示文本被截断。关键的CSS属性是`text-overflow`，但为了使它生效，还需要配合`overflow`和`white-space`属性。以下是一个示例：
```css
.text-overflow {
display: block; /* 针对内联元素，确保其作为块级元素处理 */
width: 31em; /* 设置固定宽度 */
word-break: keep-all; /* 不强制单词断行 */
white-space: nowrap; /* 禁止文本换行 */
overflow: hidden; /* 当内容超出宽度时隐藏超出部分 */
text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
}
```
这段代码创建了一个区块，其中的文本将在宽度限制内显示，且不会换行。当文本长度超过容器宽度时，超出部分会被隐藏，并在结尾处显示省略号。
接下来是自动换行的设置。如果你希望文本在遇到边界时自动换行以适应容器，可以使用`word-break`和`white-space`属性。以下是一个例子：
```css
.autowrap {
word-break: break-all; /* 允许单词在任何位置断行 */
white-space: normal; /* 允许文本正常换行 */
}
```
这个样式会让文本在遇到容器边界时自动换行，即使这可能会导致单词被截断。
对于表格中的文本溢出处理，我们需要考虑表格的布局。因为表格默认会根据内容调整列宽，所以要固定列宽并实现省略号效果，需要设置`table-layout: fixed`，然后对每个单元格(`td`)应用上述的越界省略号样式：
```css
table {
width: 30em; /* 设置表格宽度 */
table-layout: fixed; /* 使用固定布局 */
}
td {
width: 100%; /* 单元格宽度占满表格宽度 */
word-break: keep-all; /* 不强制单词断行 */
white-space: nowrap; /* 禁止文本换行 */
overflow: hidden; /* 当内容超出宽度时隐藏超出部分 */
text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记 */
}
```
这样，表格的每一列都将保持固定宽度，当单元格内的文本超出时，会显示省略号。
总结来说，CSS中的`text-overflow: ellipsis`、`overflow: hidden`和`white-space: nowrap`等属性是实现文本越界省略号的关键，而`word-break`属性则用于控制文本的换行行为。对于表格，需要结合`table-layout: fixed`来实现固定列宽和文本溢出的省略号效果。通过这些技巧，你可以更好地控制网页或应用中的文本显示，使其既美观又易读。
