提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: HTML教程 > css怎样完成单行、多行文本超越显现省略结果【html5教程】,css实现单行,多行文本超出显示省略效果

本篇文章给人人带来的内容是关于css怎样完成单行、多行文本超越显现省略结果,有肯定的参考价值,有须要的朋侪能够参考一下,愿望对你有所协助。

单行文本省略

.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网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

上一篇:

下一篇:

相关推荐

0 条评论关于"css怎样完成单行、多行文本超越显现省略结果【html5教程】,css实现单行,多行文本超出显示省略效果"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线