How to hide text-overflown as ellipsis using dynamic bootstrap cols ?

Various utilities and layouts provided by default in Bootstrap 4 to hide overflown text as ellipsis using dynamic bootstrap cols. Here dynamic bootstrap cols mean columns in row or flex have equal properties even in any numbers. The following approaches will explain it clearly.

Approach 1: To hide overflown text as ellipsis using CSS properties.

<style>
selector {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>

Then add its select to element of class col and wrap it within div tag. We can also use d-flex instead of row.



  • Example 1: Below program illustrates how to hide overflown text as ellipsis using dynamic bootstrap cols using CSS properties and Flex.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href=
        <script src=
        </script>
        <script src=
        </script>
        <script src=
        </script>
        <style>
          
            /* Use CSS properties for ellipsis */
            .ellipsis {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
              
            .purple {
                background-color: purple;
            }
        </style>
    </head>
      
    <body>
        <div class="container">
            <center>
                <h1 style="color:green;padding:13px;">
                    GeeksforGeeeks
                </h1>
                <br><br>
      
                <p><strong>6 column flex grid</strong></p>
                <div class="d-flex bg-light mb-3">
                    <div class="col ellipsis bg-primary text-white">
                        A Computer Science Portal for Geeks
                    </div>
                    <div class="col ellipsis bg-success text-white">
                        A Computer Science Portal for Geeks
                    </div>
                    <div class="col ellipsis bg-danger text-white">
                        A Computer Science Portal for Geeks
                    </div>
                    <div class="col ellipsis bg-warning text-white">
                        A Computer Science Portal for Geeks
                    </div>
                    <div class="col ellipsis bg-dark text-white">
                        A Computer Science Portal for Geeks
                    </div>
                    <div class="col ellipsis purple text-white">
                        A Computer Science Portal for Geeks
                    </div>
                </div>
            </center>
        </div>
    </body>
      
    </html>                    

    chevron_right

    
    

  • Output:

Approach 2: To hide overflown text as ellipsis using Bootstrap4 utilities as follows.

<div class=”col overflow-hidden text-truncate text-nowrap”></div>

Then Use jQueries append() function to append class col element to div tag of class row.

$(‘.row’).append(‘<div class=”col overflow-hidden text-truncate text-nowrap “>Lorem ipsum dolor sit amet, consectetur adipiscing</div>’);

Finally, use looping / condition statement to generate columns dynamically

  • Example 2: Below program illustrates how to hide overflown text as ellipsis using dynamic bootstrap cols using Bootstrap4 utilities and jQuery.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href=
        <script src=
        </script>
        <script src=
        </script>
        <script src=
        </script>
      
    </head>
      
    <body>
        <div class="container">
            <center>
                <h1 style="color:green;padding:13px;">
                    GeeksforGeeeks
                </h1>
      
                <br><br>
      
                <p><strong>12 column grid</strong></p>
                <div class="row">
                    
                    <!-- Using Bootstrap 4 utilities for ellipsis-->
                    <div class="col overflow-hidden
                                text-truncate text-nowrap border
                                border-warning bg-bright">
                        GeeksforGeeks
                    </div>
                </div>
            </center>
        </div>
      
        <script>
            $(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>');
                }
            });
        </script>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.