简单易懂，告别混乱，一文读懂ellipsis文本溢出显示省略号规则

ellipsis 简介：让文本巧妙地戛然而止

ellipsis，是 CSS 中一个非常有用的样式，它允许您在文本达到指定宽度时自动添加省略号 (...)，从而巧妙地截断文本，使其不超出指定宽度。这在网页设计中非常有用，尤其是在您需要在有限的空间内显示大量文本时。

使用 ellipsis 的方法：简单几步即可搞定

要使用 ellipsis，您只需在 CSS 样式中添加以下代码：

text-overflow: ellipsis;

然后，您还需要指定文本的宽度，这可以通过以下方式实现：

width: 200px;

这样，当文本的宽度超过 200 像素时，就会自动添加省略号。

常见的错误：让您抓狂不已

在使用 ellipsis 时，您可能会遇到一些常见的错误，比如：

1. 设置了 text-overflow: ellipsis;却不生效

这种情况可能是因为您忘记设置文本的宽度。只要您指定了文本的宽度，ellipsis 就会生效。

2. 设置了宽度以后，加一个样式 padding-left:12px;那么右边会不会超出12px？

答案是肯定的。padding-left 会在文本的左边增加 12 像素的内边距，这会导致文本的右边超出 12 像素。要解决这个问题，您可以在 CSS 样式中添加以下代码：

box-sizing: border-box;

这样，文本的宽度就会包括内边距，就不会出现超出问题了。

小技巧：让您的 ellipsis 更加完美

以下是几个让您的 ellipsis 更加完美的小技巧：

1. 使用多行 ellipsis

如果您需要在多行文本上使用 ellipsis，您可以使用以下代码：

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

这样，文本就会在多行上截断，并且在最后一行添加省略号。

2. 使用自定义省略号

您还可以使用自定义省略号来替换默认的省略号。要做到这一点，您可以在 CSS 样式中添加以下代码：

text-overflow-ellipsis: "your-custom-ellipsis";

这样，文本就会在截断时显示您自定义的省略号。

结语

ellipsis 是一个非常有用的 CSS 样式，它可以帮助您巧妙地截断文本，使其不超出指定宽度。在使用 ellipsis 时，您需要注意一些常见的错误，并且可以使用一些小技巧来让您的 ellipsis 更加完美。