单行文本省略
.ellipsis-line {
border: 1px solid #f70505;
padding: 8px;
width: 400px;
overflow: hidden;
text-overflow: ellipsis; //文本溢出显现省略号
white-space: nowrap; //文本不会换行
}
语法：
text-overflow:clip/ellipsis;
默认值：clip
适用于：一切元素
clip： 当对象内文本溢出时不显现省略标记（…），而是将溢出的部份裁切掉。
ellipsis： 当对象内文本溢出时显现省略标记（…）。
在应用的时候，有时候发明不会涌现省略标记结果，经由测试发明，应用ellipsis的时候，必需合营overflow:hidden; white-space:nowrap; width:细致值；这三个款式配合应用才会有结果。
多行文本省略
直接用css属性-webkit-line-clamp：n;设置
在WebKit浏览器或挪动端（绝大部份是WebKit内核的浏览器）的页面完成比较简单，能够直接应用WebKit的CSS扩大属性（WebKit是私有属性）-webkit-line-clamp ；注重：这是一个 不范例的属性（unsupported WebKit property），它没有涌现在 CSS 范例草案中。
-webkit-line-clamp用来限定在一个块元素显现的文本的行数。 为了完成该结果，它须要组合其他的WebKit属性。罕见连系属性：
display: -webkit-box; 必需连系的属性 ，将对象作为弹性伸缩盒子模子显现 。
-webkit-box-orient 必需连系的属性 ，设置或检索伸缩盒对象的子元素的分列体式格局 。
text-overflow: ellipsis;，能够用来多行文本的情况下，用省略号“…”隐蔽超越范围的文本。
这个属性只适宜WebKit浏览器或挪动端（绝大部份是WebKit内核的）浏览器
.multi-line {
border: 1px solid #f70505;
width: 400px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
结果如图所示：
从结果上来看，它的长处有：
1.相应式截断，依据差别宽度做出调解
2.文本超越范围才显现省略号，不然不显现省略号
3.浏览器原生完成，所以省略号位置显现恰好
然则瑕玷也是很直接，因为 -webkit-line-clamp 是一个不范例的属性，它没有涌现在 CSS 范例草案中。也就是说只要 webkit 内核的浏览器才支撑这个属性，像 Firefox, IE 浏览器一切都不支撑这个属性，浏览器兼容性不好。
应用场景：多用于挪动端页面，因为挪动装备浏览器更多是基于 webkit 内核，除了兼容性不好，完成截断的结果不错。
应用定位和伪类元素
p{
position: relative;
width:400px;
line-height: 20px;
max-height: 60px;
overflow: hidden;
}
p::after{
content: "…";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
background: -webkit-linear-gradient（left, transparent, #fff 55%）；
background: -o-linear-gradient（right, transparent, #fff 55%）；
background: -moz-linear-gradient（right, transparent, #fff 55%）；
background: linear-gradient（to right, transparent, #fff 55%）；
}
结果如图：
合适场景：笔墨内容较多，肯定笔墨内容肯定会凌驾容器的，那末挑选这类体式格局不错。但笔墨未超越行的情况下也会涌现省略号，可连系js优化该要领。
注：
将height设置为line-height的整数倍，防备超越的笔墨显露。
给p::after增加渐变背景可防止笔墨只显现一半。
因为ie6-7不显现content内容，所以要增加标签兼容ie6-7（如：<span>…<span/>）；兼容ie8须要将：：after替换成：after。
连系js优化代码
css:
p {
position: relative;
width: 400px;
line-height: 20px;
overflow: hidden;
}
.p-after:after{
content: "…";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
background: -webkit-linear-gradient（left, transparent, #fff 55%）；
background: -moz-linear-gradient（left, transparent, #fff 55%）；
background: -o-linear-gradient（left, transparent, #fff 55%）；
background: linear-gradient（to right, transparent, #fff 55%）；
}
js:
$（function（）{
//猎取文本的行高，并猎取文本的高度，假定我们划定的行数是五行，那末对凌驾行数的部份举行限定高度，并加上省略号
$（'p'）。each（function（i, obj）{
var lineHeight = parseInt（$（this）。css（"line-height"））；
var height = parseInt（$（this）。height（））；
if（（height / lineHeight） >3 ）{
$（this）。addClass（"p-after"）
$（this）。css（"height","60px"）；
}else{
$（this）。removeClass（"p-after"）；
}
}）；
}）
应用第三方插件或许本身写剧本掌握
网上有许多引见关于应用JavaScript完成多行文本溢出省略的方法，有的应用插件，有的应用本身封装好的JavaScript文件，然则，我以为，照样本身写的js比较好用。
//div
<div class="box">北京时间11月18日，姑苏太湖马拉松女子竞赛中，中国选手何引丽终究取得亚军，落伍冠军5秒。然则赛后，何引丽在交际媒体上致歉，称本身末了时候跑累了，没有拿稳国旗，这究竟是怎么回事？</div>
//css
.box {
width: 400px;
height: 40px;
border: 1px solid #f70505;
line-height: 20px;
}
//js
<script type="text/javascript">
$（function（） {
var content_arr = []; //定义一个空数组
$（'.box'）。each（function（） { //遍历box内容
var content = $.trim（$（this）。text（））； //去掉前后文空格
content_arr.push（content）； //内容放进数组
}）
for （var i = 0; i < content_arr.length; i++） { //遍历轮回数组
if （content_arr[i].length >= 50） { //假如数组长度（也就是文本长度）大于即是50（数字可本身定义）
content = content_arr[i].substr（0, 50） + '…'; //增加省略号并放进box笔墨内容背面
$（".box"）。eq（i）。text（content）；
} else {
以上就是对css怎样完成单行、多行文本超越显现省略结果的悉数引见，假如您想相识更多有关CSS3教程，请关注ki4网。
以上就是css怎样完成单行、多行文本超越显现省略结果的细致内容，更多请关注ki4网别的相干文章！
