Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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. 

html




<!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>                   


  • 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. 

html




<!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 till 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>


  • Output:


Last Updated : 10 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads