How to Work with Ellipsis in Bootstrap Responsive Table

How to work with ellipsis in bootstrap responsive table

The text-overflow property only affects content that is overflowing a
block container element in its inline progression direction
MDN

For text-overflow to work, specifying text-overflow: ellipsis alone will not do any good - you should use the following styles together:

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

span, div, th, td {  overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;  max-width: 100px;}

<span>Inline element overflow ellipsis do not work</span><div>Block elements overflow ellipsis works</div><table>  <tr><th>Table - Overflow test</th></tr>  <tr><td>This is a long text</td><td>This is a long text</td></tr></table>

BootStrap Table text ellipsis can not be with responsive web?

you have to apply this all style for ellipsis element.

{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Bootstrap 3 truncate long text inside rows of a table in a responsive way

I did it this way (you need to add a class text to <td> and put the text between a <span>:

HTML

<td class="text"><span>looooooong tHow to work with ellipsis in bootstrap responsive table BootStrap Table text ellipsis can not be with responsive web? Bootstrap 3 truncate long text inside rows of a taext</span></td>

SASS

.table td.text {
    max-width: 177px;
    span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        max-width: 100%;
    }
}

CSS equivalent

.table td.text {
    max-width: 177px;
}
.table td.text span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 100%;
}

And it will still be mobile responsive (forget it with layout=fixed) and will keep the original behaviour.

PS: Of course 177px is a custom size (put whatever you need).

text overflow control with CSS/Bootstrap table

Try adding overflow: hidden;, text-overflow: ellipsis;, and white-space: nowrap; to td.

Bootstrap 4 truncate long text inside a table in mobile devices

Look at the contacts app on your phone. You'll notice that it only shows the name on each line in an "index" view. From there, users will click on each user name to reveal additional details about each contact. This is what we call "progressive disclosure" for mobile apps.

Use ellipsis in bootstrap table if number of characters exceeds 200

I've found an example of this working using the data-formatter attribute provided by the Bootstrap Table plugin.

I defined a function that strips the text if it over a certain amount of characters.

You can find an example of this here.

Add this to the column you want to set a limit on:

data-formatter="shortingText"

Finally, create the formatted function required, and set the character limit to what you like.

function shortingText(value) {
    if(value.length <= 50) {
        return value;
    }
    
    return value.substring(0, 50) + '...';
 }

See here for further reading.

bootstrap table columns too wide, when I set no-wrap

use these CSS styles:

for your table

        table-layout: fixed;

for th, td

        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

and use inline (not CSS rules, it's important) width (not max-width) for your th elements, like this:

<th style="width: 11%" ... >

you are free to use px instead of % or other units as well

extra scrolling you may have because of use of '.row' class which adds some negative margin. You must make sure to compensate it by using proper wrapper/container class/styles

bootstrap responsive table content wrapping

I ran across the same issue you did but the above answers did not solve my issue. The only way I was able to resolve it - was to make a class and use specific widths to trigger the wrapping for my specific use case. As an example, I provided a snippet below - but I found you will need to adjust it for the table in question - since I typically use multiple colspans depending on the layout. The reasoning I believe Bootstrap is failing - is because it removes the wrapping constraints to get a full table for the scrollbars. THe colspan must be tripping it up.

<style>
@media (max-width: 768px) { /* use the max to specify at each container level */
    .specifictd {    
        width:360px;  /* adjust to desired wrapping */
        display:table;
        white-space: pre-wrap; /* css-3 */
        white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
        white-space: -pre-wrap; /* Opera 4-6 */
        white-space: -o-pre-wrap; /* Opera 7 */
        word-wrap: break-word; /* Internet Explorer 5.5+ */
    }
}

I hope this helps

---

Related Topics