css控制文本实现越界省略号以及自动换行

实现文本的越界省略号和自动换行可以通过CSS的text-overflow和white-space属性来控制。

文本越界省略号

如果一段文本内容过长，而它的容器宽度不足以完整显示，我们通常希望它以省略号的形式展示，而不是被截断。这时我们可以使用text-overflow属性来实现。具体步骤如下：

1.将元素的overflow属性设置为hidden或scroll；

2.将text-overflow属性设置为ellipsis，表示以省略号的形式展示文本溢出部分；

3.将white-space属性设置为nowrap，以避免文本换行。

下面是一个示例：

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

如果要使多行文本实现越界省略号，我们还需要加上一些限制行数的处理。最简单的方法是使用Webkit的CSS扩展属性webkit-line-clamp，如下所示：

.multi-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 限制文本最多显示2行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

在上面的示例中，我们使用了CSS3的flex布局实现了文本垂直居中，同时将文本最多显示2行，并以省略号结束。

自动换行

如果一段文本内容过长，而它的容器宽度不足以完整显示，我们通常希望它自动换行以适应容器宽度。这时我们可以使用white-space属性来实现。具体步骤如下：

1.将white-space属性设置为pre-wrap，以允许文本在空格、Tab键和换行符处自动换行；

2.将元素的overflow属性设置为hidden或scroll，以隐藏溢出部分。

下面是一个示例：

.wrap {
  white-space: pre-wrap;
  overflow: hidden;
}

在上面的示例中，文本会在容器宽度不足以完全显示时自动换行，而@font-face属性可以更改字体以满足特定的需求。

上面是两个常见的文本控制技巧，它们可以单独使用，也可以组合使用。希望这篇答案能够帮助您。