CSS中超出的文本内容显示省略号

标签：class   两种   amp   文本   idt   ellipsis   splay   添加   没有   

首先，分析超出内容有两种情况，单行内容超出和多行内容超出，以下逐一说明：

单行内容操作：

　　单行操作必须有width属性，就是元素要有宽和高的限制才可以，具备以上基本条件之后，编写以下代码

　　overflow:hidden;

　　text-overflow:ellipsis;

　　white-space:nowrap;

　　此时，即可看到单行文本超出显示省略号的效果。

多行内容操作：

　　多行文本超出省略早期是没有该写法的，本文使用的是css3对WebKit的拓展写法，需要注意，该方法只适用于WebKit浏览器和移动端页面。

　　以下为关键代码片段：

　　overflow: hidden;

　　display: -webkit-box;

　　-webkit-line-clamp: 5;

　　-webkit-box-orient: vertical;

　　此时，即可看到多行文本超出显示省略号的效果。
简单解释：
　　首先设置元素为弹性盒模型，也即是display:box,然后设置限制文本的行数，使用line-clamp属性，最后设置弹性盒子内容的排列方式box-orient，别忘却了还需要添加超出隐藏属性设置overflow: hidden。

　　以上就是设置CSS中超出的文本内容显示省略号的方法！

CSS中超出的文本内容显示省略号

标签：class   两种   amp   文本   idt   ellipsis   splay   添加   没有   

原文地址：https://www.cnblogs.com/laowangJames/p/9597120.html