CSS完成单行、多写作本外溢显示信息省略号的完

日期:2021-01-20 类型:科技新闻 

关键词:制作小程序,小程序商城,扫码点餐小程序,微信小程序开店的步骤,牛刀小程序

1、单行外溢

1,单行外溢,超过一部分显示信息...或截取。前提条件务必有宽度。
CSS:{width:xxpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;},截取为clip;

完成编码:

width:300px;    
overflow: hidden;    
text-overflow:ellipsis;    
whitewhite-space: nowrap; 

实际效果如图:


可是这个特性只适用单写作本的外溢显示信息省略号,假如大家要完成多写作本外溢显示信息省略号呢。

接下来关键说1说多写作本外溢显示信息省略号,以下。

2、多行外溢

{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;}

完成方式:
 

 

display: -webkit-box;    
-webkit-box-orient: vertical;    
-webkit-line-clamp: 3;    
overflow: hidden; 

实际效果如图:


可用范畴:

因应用了WebKit的CSS拓展特性,该方式可用于WebKit访问器及挪动端;

注:

1.-webkit-line-clamp用来限定在1个块元素显示信息的文字的行数。 以便完成该实际效果,它必须组成别的的WebKit特性。普遍融合特性:
2.display: -webkit-box; 务必融合的特性 ,将目标做为延展性伸缩盒子实体模型显示信息 。
3.-webkit-box-orient 务必融合的特性 ,设定或查找伸缩盒目标的子元素的排序方法 。

完成方式:
 

 

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}    
p::after{content: "..."; position: absolute; bottombottom: 0; rightright: 0; padding-left: 40px;    
background: -webkit-linear-gradient(left, transparent, #fff 55%);    
background: -o-linear-gradient(rightright, transparent, #fff 55%);    
background: -moz-linear-gradient(rightright, transparent, #fff 55%);    
background: linear-gradient(to rightright, transparent, #fff 55%);    
} 

可用范畴:
该方式可用范畴广,但文本未超过行的状况下也会出現省略号,可融合js提升该方式。

注:

1.将height设定为line-height的整数金额倍,避免超过的文本露出。
2.给p::after加上渐变色情况可防止文本只显示信息1半。
3.因为ie6⑺无法显示content內容,因此要加上标识适配ie6⑺(如:<span>…<span/>);适配ie8必须将::after更换成:after。

脚本制作之家网编填补:

ie关键的访问器1定要界定line-height与高宽比,-webkit-line-clamp意思便是几行,比如

line-height: 20px;

max-height: 40px;

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

overflow: hidden;

-webkit-line-clamp

-webkit-line-clamp 是1个 不标准的特性(unsupported WebKit property),它沒有出現在 CSS 标准草案中。
限定在1个块元素显示信息的文字的行数。 以便完成该实际效果,它必须组成别的外来的WebKit特性。普遍融合特性:
display: -webkit-box; 务必融合的特性 ,将目标做为延展性伸缩盒子实体模型显示信息 。
-webkit-box-orient 务必融合的特性 ,设定或查找伸缩盒目标的子元素的排序方法 。
text-overflow,能够用来多写作本的状况下,用省略号“...”掩藏超过范畴的文字 。