📌  相关文章
📜  CSS | webkit-line-clamp 属性

📅  最后修改于: 2021-09-02 03:21:10             🧑  作者: Mango

-webkit-line-clamp属性用于限制块容器可能包含的行数。此属性仅在 display 属性设置为 ‘-webkit-box’ 或 ‘-webkit-inline-box’ 并且 ‘-webkit-box-orient’ 属性设置为 ‘vertical’ 时有效。

句法： 

-webkit-line-clamp: none | integer | initial | inherit

属性值：

  • none：用于指定内容不会被钳制。它是默认值。

    例子： 

    


  
    -webkit-line-clamp property
  
  


  
    
    GeeksforGeeks
  
    
  
    -webkit-line-clamp: 2
  
  
    
    GeeksforGeeks is a computer
    science portal with a huge
    variety of well written and
    explained computer science
    and programming articles,
    quizzes and interview questions.
  
    
  -webkit-line-clamp: none
  
    
    GeeksforGeeks is a computer
    science portal with a huge
    variety of well written and
    explained computer science
    and programming articles,
    quizzes and interview questions.
  

    输出：
    没有任何

  • 整数：用于指定内容将被剪切的行数。该值应大于 0。

    例子： 

    


  
    -webkit-line-clamp
  
  


  
    
    GeeksforGeeks
  
    
  
    -webkit-line-clamp: 1
  
  
    
    GeeksforGeeks is a computer
    science portal with a huge
    variety of well written and
    explained computer science
    and programming articles,
    quizzes and interview questions.
  
    
  -webkit-line-clamp: 3
  
    
    GeeksforGeeks is a computer
    science portal with a huge
    variety of well written and
    explained computer science
    and programming articles,
    quizzes and interview questions.
  

    输出：
    线

  • initial：用于将属性设置为其默认值。

    例子： 

    


  
    -webkit-line-clamp
  
  


  
    
    GeeksforGeeks
  
    
  -webkit-line-clamp: 2
  
    
    GeeksforGeeks is a computer
    science portal with a huge
    variety of well written and
    explained computer science
    and programming articles,
    quizzes and interview questions.
  
    
  -webkit-line-clamp: initial
  
    
    GeeksforGeeks is a computer
    science portal with a huge
    variety of well written and
    explained computer science
    and programming articles,
    quizzes and interview questions.
  

    输出：
    最初的

  • 继承：这用于从其父级继承属性。

支持的浏览器： -webkit-line-clamp属性支持的浏览器如下：

  • 谷歌浏览器
  • 火狐
  • 苹果浏览器
  • 歌剧