CSS3特性 line

日期:2021-02-28 类型:科技新闻 

关键词:通道抠图,怎么在图片上编辑文字,创客贴作图神器,免费图片设计制作在线,背景透明图制作

表明:限定在1个块元素显示信息的文字的行数。

-webkit-line-clamp 是1个 不标准的特性(unsupported WebKit property),它沒有出現在 CSS 标准草案中。

以便完成该实际效果,它必须组成别的外来的WebKit特性。普遍融合特性:

  • display: -webkit-box; 务必融合的特性 ,将目标做为延展性伸缩盒子实体模型显示信息 。
  • -webkit-box-orient 务必融合的特性 ,设定或查找伸缩盒目标的子元素的排序方法 。
  • text-overflow,能够用来多写作本的状况下,用省略号“...”掩藏超过范畴的文字 。

今日接到提升要求,帖子目录里的內容规定缩略至3行,并带‘…’省略号

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf⑻">
    <title>cline-clamp</title>
    <style>    
            .box{
                width: 200px;
                height: 300px;
                border:1px solid black;
            }
            p{
                 display: -webkit-box;
                 -webkit-box-orient: vertical;
                  -webkit-line-clamp: 4;            /*设定p元素最大4行,父元素需填写宽度才显著*/
                  text-overflow: ellipsis;
                  overflow: hidden;
                 /* autoprefixer: off */
                 -webkit-box-orient: vertical;
                  /* autoprefixer: on */
                  /*由于编码自然环境的关联-webkit-box-orient被过虑掉了 autoprefixer 这个重要字能够免去被过虑的姿势*/
          word-wrap:break-word;
          word-break:break-all;
} </style> 
</head> 
<body> 
<div class="box"> 
    <p> static:目标遵照基本流。top,right,bottom,left等特性不容易被运用。 relative: 目标遵照基本流,而且参考本身在基本流中的部位根据top,right,bottom,left特性开展偏位时不危害基本流中的任何元素。 absolute:目标摆脱基本流,应用top,right,bottom,left等特性开展肯定精准定位,
    </p> 
</div> 
</body> 
</html>

实际效果以下:

假如你标识内的是英文,英文是不容易全自动换行的,因此你必须让他全自动换行加上以下编码便可:

word-wrap:break-word;
word-break:break-all;

自然还可以应用软件clamp.js

 到此这篇有关CSS3特性 line-clamp操纵文字行数的应用的文章内容就详细介绍到这了,更多有关CSS3 line-clamp操纵行数內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!