应用纯css断开多写作本

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

关键词:微信公众号平台小程序,微信打分小程序,小程序发布,小程序大全,微信小程序编程

话很少说,先上编码


拷贝编码
编码以下:

overflow : hidden;
/*text-overflow: ellipsis; 一些示例里必须界定该特性,具体可省略*/
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

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

适配性

示例

拷贝编码
编码以下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf⑻">
<title>无题目文本文档</title>
<style>
.box {
width: 400px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical; overflow: hidden;
}
</style>
</head></p> <p><body>
<div class="box">
【大家评价与美团网合拼 王兴张涛出任联席CEO】大家评价网与美团网今日协同公布申明,公布达到发展战略协作,彼此已相互创立1家新企业。新企业将执行Co-CEO规章制度,美团CEO王兴和大家评价CEO张涛将另外出任联席CEO和联席董事长,重特大管理决策将在联席CEO和董事会层面进行。
</div>
</body>
</html>

以上便是有关用纯css完成多写作本断开的所有內容,期待对大伙儿学习培训应用css能有一定的协助。

上一篇:css重绘与重排的方式 返回下一篇:没有了