长文本的 textbreak - CSS

当我们处理长文本时，我们通常想要在页面上显示一定数量的字符，然后省略余下的部分。在这种情况下，text-overflow属性就派上了用场。

什么是 text-overflow？

text-overflow属性是CSS3的一个新属性，可以用来控制文本溢出（当文本太长或超出父容器时）的处理方式。

一般来说，文本溢出是通过隐藏超出容器边界的部分来实现的。text-overflow属性定义了当文本溢出父容器时，要如何处理溢出部分。

使用 text-overflow 实现长文本截断

下面是一个示例，展示了如何使用 text-overflow 属性来截断长文本，只显示前30个字符。溢出部分会用省略号来代替。

.truncate-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

上面的代码使用了以下CSS属性：

• white-space:nowrap; 防止文本换行
• overflow:hidden; 隐藏溢出的文本内容
• text-overflow:ellipsis; 用省略号来代替被截断的文本
• max-width:100%; 父容器的最大宽度

如下面这个例子：

<div class="truncate-text">这是一段超级长的文本，它将在显示前30个字符后停止，后面的内容将被省略。</div>

效果如下：

自定义省略标记

text-overflow 的默认值是 ellipsis，但是，你也可以使用其他符号来表示省略。例如，你可以使用 emdash 代表一个中横线，如下面的代码：

.truncate-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: "—";
    max-width: 100%;
}

效果如下：

其他 text-overflow 的属性值

text-overflow 属性还有两个可选的属性值可以使用：clip 和 string。

在 text-overflow: clip 的情况下，超出的文本将被简单地修剪，并隐藏超出容器的部分。

.truncate-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    max-width: 100%;
}

效果如下：

在 text-overflow: string 的情况下，需要使用 CSS 的 content 属性来指定一个字符串值来替换省略号。

.truncate-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: "——";
    max-width: 100%;
}

效果如下：

总结

通过使用 text-overflow 属性可以在处理长文本时非常有用。它可以帮助你使用 CSS 控制如何显示超出父容器宽度的文本，因此你可以很好地控制你的网页的布局和设计。

现在你可以在你的项目中使用这个属性来截断过长的文本，让你的网页看起来更美观。