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

可以将文本长度限制为$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.