[分享]css3文字多于两行点点点显示

CSS3中提供了一种文字多于两行时点点点显示的效果，这个效果可以让文本内容更加美观，同时对网页排版也有很好的帮助。下面就为大家介绍一下如何实现这个效果。 首先，在HTML文件中加上多行文本： 这是一...

CSS3中提供了一种文字多于两行时点点点显示的效果，这个效果可以让文本内容更加美观，同时对网页排版也有很好的帮助。下面就为大家介绍一下如何实现这个效果。
首先，在HTML文件中加上多行文本：

<p>
这是一个多行文本，用来测试CSS3中文字多于两行显示点点点效果。
这是第二行。
这是第三行。
这是第四行。
</p> 

然后在CSS文件中添加以下代码：

p {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 200px;
} 

代码解释：
* p 选择器选中多行文本的p标签。 * display: block; 表示将p标签转化为块状元素。 * overflow: hidden; 表示超出容器部分的内容隐藏不显示。 * text-overflow: ellipsis; 表示超出部分显示省略号。 * white-space: nowrap; 表示文本不换行。 * width: 200px; 表示p标签的宽度为200像素。
通过以上代码，我们就可以实现CSS3中文字多于两行点点点显示的效果了。该效果可以有效改善网页的排版，同时也为读者带来更好的视觉体验。