Text Overflow Control With Css/bootstrap Table

I tried using word-wrap as well as adding a class to td to do text-overflow: elipsis but nothing seems to be affecting this particular table and I end up with this: Here's my HTM

Solution 1:

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

Solution 2:

There's a CSS property for breaking long words. Give that a shot.

word-break: break-word;

Here's a link from w3 schools:

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-break

Here is a fiddle I put together demonstrating the use of this in a td element:

https://jsfiddle.net/rhpumk0d/

Solution 3:

text-overflow: ellipsis only works when the text parent element has a declared width.

Try adding a fixed width to the td element and see how things work out.

Solution 4:

Add class text to td/th and fill text in span.

.table-fixedtd.textspan {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 100%;
}

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

Solution 5:

Sorry for saying obvious, but did you clean browser´s cache after changes? Sometimes css´s styles doesn´t change as far as it still use the cache definitions...

word-wrap:break-word;

or

word-break:break-all;

should be work

Clean mozilla cache

Clean Chrome cache