2023-06-26 21:45:59 css超出部分显示为省略号，在 CSS 中使用省略号（ellipsis）来表示文本超出部分的省略。
CSS 中使用省略号（ellipsis）来表示文本超出部分的省略，可以使用以下属性和值组合：
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
这里是每个属性的作用：
overflow: hidden;：隐藏超出容器大小的内容。
white-space: nowrap;：防止文本换行，使其在一行中显示。
text-overflow: ellipsis;：当文本超出容器宽度时，显示省略号。
以下是一个示例：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 200px;
border: 1px solid #ccc;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="container">
This is a long text that will be truncated with an ellipsis when it exceeds the container's width.
</div>
</body>
</html>
在上面的示例中，.container 类将文本容器的宽度设置为 200px，并应用了省略号样式。如果文本超出了容器的宽度，就会显示省略号。
记住，这种效果只适用于单行文本。如果你希望应用于多行文本的省略号样式，就需要使用更复杂的解决方案，如 JavaScript 或 CSS 高级技术（例如，使用伪元素和计算文本行数）。