Text overflow in table with variable size

Question

I was looking to implement the following design to the HTML/CSS.

I have got problems with the text overflow in the column. Currently the table column width is given in the percentage format so that the column width will change depending on the screen size, but there is a minimum width too. In the first text column, you can see that the content is extending and produced a second line due to the long size. How to avoid this problem using the text overflow? Or any other solution? Also, you can see that a set of icons are appearing in the same row when the mouse hover takes place. At this time, the text below the icons should hide and it should be shortened as shown in the design. Can you advise me to get a solution to this problem? I have tried text-overflow: ellipsis. But I'm getting problem when the screen width changes. Since I don't have a minimum width due to the variable column width, how to cut short the text in this field? Also in the hover case ??

Please let me know if you want to know anything else.

Giona · Accepted Answer · 2012-09-15 12:42:25Z

2

If you don't want the text to split in multiple rows, add white-space:nowrap rule. Then, set a max-width for the cell.

For the icons, position them in absolute to the right, with a z-index higher then the text. You'll have to add a relative position to the containing cell also. To keep them visible over text, i've added a background color (and some left padding).

EDIT: Fix for Mozilla

Mozilla seems to ignore position:relative; for td elements. To fix it, you've to wrap the td contents inside another div, and apply this style

.tables td {
    font-weight: 400;
    font-size: 13px;
    border-bottom: 1px solid #E1E1E1;
    line-height: 38px;
    text-align: right;
    white-space: nowrap;
    max-width: 200px; /* just an example */
}

.tables td > div {
    overflow: hidden;
    width:100%;
    position: relative;
}

.linkFunctions {
    display: none;
    padding-top: 14px;
    position: absolute;
    right: 0;
    z-index: 999;
    background-color: #FFF9DC;
    padding-left: 3px;
    width: 100%;
    max-width: 120px; /* just an example */
    text-overflow: ellipsis;
    overflow: hidden;
}

edited Sep 15, 2012 at 12:42

answered Sep 15, 2012 at 10:26

Giona

21.2k5 gold badges60 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

99tharun Over a year ago

What if, we need to add some three dont's (...) whenever we cut short the text?

Giona Over a year ago

Add this to .linkFunctions width: 100%; max-width: 120px; text-overflow: ellipsis; overflow: hidden;

99tharun Over a year ago

But the three dots are not displaying!

Giona Over a year ago

I see. There's an issue with position:relative for the td element. You've to wrap the content of td into another div, this way:

<td><div style="position:relative;"><a href="" class="linkName">Google siteeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</a>                             <div class="linkFunctions">                             	....                             </div>                        </div></td>

Giona Over a year ago

I edited my answer with Mozilla fix ;) sure you can highlight the row on check, but you need jQuery... Check this question: stackoverflow.com/questions/5516568/…

|

Henrik Ammer · Accepted Answer · 2012-09-15 10:25:18Z

0

It's not exactly what you want (regarding the elipsis) but comes very close.

For the <a> inside the <td> add

td a{
    display:block;
    overflow:hidden;
    width:100%;
    white-space:nowrap;
}

(You might need to add a class to them to more easily target them and not ALL <a> inside <td>s).

And regarding the hover. Float the div.linkFunctions right, add the yellow background to it and it will look like it cuts the text accordingly.

answered Sep 15, 2012 at 10:25

Henrik Ammer

1,89913 silver badges26 bronze badges

Comments

anthumchris · Accepted Answer · 2015-05-21 00:27:18Z

0

All of those require a width to be set, which doesn't make tables fluid as they are intended to be. Use this: http://jsfiddle.net/maruxa1j/

That allows you to automatically set widths on <td> as percentages and the :after automatically sizes the overflowed <span>

answered May 21, 2015 at 0:27

anthumchris

9,2482 gold badges35 silver badges60 bronze badges

Collectives™ on Stack Overflow

Text overflow in table with variable size

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related