📜  使用 CSS 将文本长度的限制设置为 N 行

📅  最后修改于: 2021-10-31 05:36:39             🧑  作者: Mango

可以将文本长度限制为N使用 CSS 的行。这称为线钳位或多线截断。

可能有两种情况:

  • 截断 1 行后的文本:如果需要截断 1 行后的文本,则可以使用 CSS的 text-overflow 属性。它创建省略号并优雅地切断单词。
    div{
      white-space: nowrap; 
      overflow: hidden;
      text-overflow: ellipsis;
    }
    

    下面的代码演示了 CSS 的text-overflow 属性:

    
    
    
        
            
        
    
      
    
        
            Hello GeeksforGeeks. A Computer Science portal for geeks.         It contains well written, well thought articles.          This is a paragraph containing multiple lines.     
                        
  • 在超过 1 行之后截断文本:如果您需要在超过 1 行之后截断文本,则必须使用 WebKit。 Webkit 是在 Apple 的 Safari 浏览器和 Google 的 Chrome 中使用的 html/css 渲染引擎。

    使用 WebKit 的各种问题是:

    1. 仅在某些浏览器中支持 WebKit。它仅受 Google chrome 和 Apple 的 Safari 浏览器支持,不受 Internet Explorer、Microsoft Edge、Firefox 或 Opera Mini 支持。
    2. 它有时会切断单词的最后一个字母,因此它不会只在空格上中断。
    3. 在 WebKit 中,没有替代省略号,即在截断行的末尾,除了省略号之外,您不能使用任何其他内容。
    .text{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        line-height: 16px;    
        max-height: 32px;     
        -webkit-line-clamp: 2; /* Write the number of 
                                  lines you want to be 
                                  displayed */
        -webkit-box-orient: vertical;
    }
    

    下面的代码演示了使用 WebKit 截断 N 行:

    
    
    
        
              
            
    
      
    
        
            Lorem ipsum dolor sit amet, consectetur adipisicing elit,          sed do eiusmod tempor incididunt ut labore et dolore          magna aliqua. Ut enim ad minim veniam, quis nostrud          exercitation ullamco laboris nisi ut aliquip ex ea          commodo consequat. Duis aute irure dolor in reprehenderit          in voluptate velit esse cillum dolore eu fugiat nulla          pariatur. Excepteur sint occaecat cupidatat non proident,          sunt in culpa qui officia deserunt mollit anim id est          laborum.Lorem ipsum dolor sit amet, consectetur adipisicing          elit, sed do eiusmod tempor incididunt ut labore et dolore          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation          ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis          aute irure dolor in reprehenderit in voluptate velit esse          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat          cupidatat non proident, sunt in culpa qui officia deserunt          mollit anim id est laborum.     
                        

    Opera Web 浏览器有自己的方法来处理这种情况。它在文本被截断的行上应用省略号。

    .text{
        overflow: hidden;
        white-space: normal;
        height: 1.2em; /* exactly 2 lines */
        text-overflow: -o-ellipsis-lastline;
    }
    
    
    
    
        
        
    
      
    
        
            Lorem ipsum dolor sit amet, consectetur adipisicing elit,          sed do eiusmod tempor incididunt ut labore et dolore magna          aliqua. Ut enim ad minim veniam, quis nostrud exercitation         ullamco laboris nisi ut aliquip ex ea commodo consequat.          Duis aute irure dolor in reprehenderit in voluptate velit          esse cillum dolore eu fugiat nulla pariatur. Excepteur          sint occaecat cupidatat non proident, sunt in culpa qui          officia deserunt mollit anim id est laborum.Lorem ipsum          dolor sit amet, consectetur adipisicing elit, sed do          eiusmod tempor incididunt ut labore et dolore magna aliqua.         t enim ad minim veniam, quis nostrud exercitation ullamco          laboris nisi ut aliquip ex ea commodo consequat. Duis aute          irure dolor in reprehenderit in voluptate velit esse cillum          dolore eu fugiat nulla pariatur. Excepteur sint occaecat          cupidatat non proident, sunt in culpa qui officia deserunt          mollit anim id est laborum.