简介
在这个实验中，我们将深入探讨 CSS 编程的世界，并学习如何截断超出一行宽度的文本。通过使用 overflow、white-space 和 text-overflow 属性的组合，我们将能够在截断文本的末尾显示省略号。通过这个实验，我们将更深入地了解如何优化网站上文本的显示。
这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个 初级 级别的实验，完成率为 100%。获得了学习者 100% 的好评率。
截断文本
虚拟机中已经提供了 index.html 和 style.css。
要截断超过一行的文本并在末尾添加省略号，请使用以下 CSS 属性：
overflow: hidden防止文本超出其尺寸范围white-space: nowrap防止文本在高度上超过一行text-overflow: ellipsis如果文本超出其尺寸范围，则添加省略号- 为元素指定固定的
width，以便知道何时显示省略号
请注意，此方法仅适用于单行元素。例如：
<p class="truncate-text">If I exceed one line's width, I will be truncated.</p>
.truncate-text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 200px;
}
请点击右下角的“Go Live”以在端口 8080 上运行 Web 服务。然后，你可以刷新“Web 8080”标签页来预览网页。
总结
恭喜你！你已经完成了“截断文本”实验。你可以在 LabEx 中练习更多实验来提升你的技能。