要使用CSS实现文本溢出效果，需要将超出容器的文本进行隐藏。可以通过以下两种方法来实现：
1.使用 text-overflow 属性：text-overflow 属性是一个 CSS3 新增的属性，用于控制文本溢出时显示的内容。通常与 white-space 属性一起使用。其中，text-overflow 属性主要有以下几个值可选：
样例代码如下：
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}2.使用单独的伪元素: 通过在容器内添加 ::after 伪元素，并设置其 content 属性为省略号（...），并通过设置 display 为 inline-block ，绝对定位等方式，将省略号放到超出容器的文本之后。
样例代码如下：
.container {
position: relative;
width: 200px;
border: 1px solid #ccc;
padding: 5px;
}
.container::after {
content: "...";
display: inline-block;
width: 20px;
height: 20px;
position: absolute;
top: 0;
right: 0;
}
.container p {
margin: 0;
}需要注意的是，文本溢出效果通常需要先设置容器的固定宽度，并且尽量采用一条文本进行实现。如有多条文本需要实现，则需要对每个文本单独设置 text-overflow 属性，或者在每个文本内部再嵌套一个容器进行控制。