如何使用动态bootstrap cols将文本溢出的内容隐藏为省略号？

默认情况下，Bootstrap 4中提供了各种实用程序和布局，以使用动态bootstrap cols将溢出的文本隐藏为省略号。在这里，动态引导程序列表示行或flex中的列具有相等的属性，即使有任何数量也是如此。以下方法将对其进行清楚的解释。

方法1：使用CSS属性将溢出的文本隐藏为省略号。

然后将其选择添加到col类的元素中，并将其包装在div标签中。我们也可以使用d-flex代替row。

• 示例1：下面的程序说明了如何使用CSS属性和Flex使用动态引导程序列将隐藏的文本隐藏为省略号。

    
  
      
      
      
      
      
      
      
      
      
      
        
          /* Use CSS properties for ellipsis */
          .ellipsis {
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
          }
            
          .purple {
              background-color: purple;
          }
      
  
    
  
      
          
              
                  GeeksforGeeeks
              
              
    
              6 column flex grid
              
                  
                      A Computer Science Portal for Geeks
                  
                  
                      A Computer Science Portal for Geeks
                  
                  
                      A Computer Science Portal for Geeks
                  
                  
                      A Computer Science Portal for Geeks
                  
                  
                      A Computer Science Portal for Geeks
                  
                  
                      A Computer Science Portal for Geeks
                  
              
          
      
  
    
                      

• 输出：
  

方法2：使用Bootstrap4实用程序将溢出的文本隐藏为省略号，如下所示。

然后使用jQueries append()函数将类col元素附加到类行的div标签上。

$(‘.row’).append(‘

Lorem ipsum dolor sit amet, consectetur adipiscing

’);

最后，使用循环/条件语句动态生成列

• 示例2：下面的程序演示了如何使用Bootstrap4实用程序和jQuery使用动态引导程序cols将隐藏的文本隐藏为省略号。

    
  
      
      
      
      
      
      
      
      
      
    
  
    
  
      
          
              
                  GeeksforGeeeks
              
    
              
    
              12 column grid
              
                  
                  
                  
                      GeeksforGeeks
                  
              
          
      
    
      
          $(document).ready(function() {
              var cols = 12;
                
              // Looping til 12 col
              for (i = 1; i < cols; i++)
                
              // Appending class col div tag
              {
                  $('.row')
                  .append('<div class="col overflow-hidden text-truncate'+
                  ' text-nowrap border border-warning bg-bright">'+ 
                  ' GeeksforGeeks</div>');
              }
          });
      
  
    

• 输出：