Menu
Here is my problem HTML:
<table style="width:100%"> <tr> <td style="width:100%;overflow:hidden"> <div style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long </div> </td> </tr> </table> Here is what I wanted:
<div style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%">long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long </div> That is:
div do not make the table and td so widediv dynamic change of ellipsis btw, anyway to minic text-overflow on Firefox?
761
Definition and Usage The nowrap attribute is a boolean attribute. When present, it specifies that the content inside a cell should not wrap.
NOWRAP indicates that text should not wrap in the cell. NOWRAP serves much the same purpose as the <NOBR> tag. For example, the following cell will not wrap not matter how long the text. this code.
If you want to prevent the text from wrapping, you can apply white-space: nowrap; Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code).
To use the CSS overflow property with its "hidden" value on the HTML <td> element, you need to set the table-layout property with the "fixed" value and an appropriate width on the <table> element. Then, you need to add the overflow property set to "hidden" and white-space property set to "nowrap" on the table cell.
Edit: fixed this myself using CSS:
table { table-layout:fixed; width:100%; } Rather than using table-layout: fixed; for your table, you can use this trick to get a DIV to always take up the full space of a TD with text-overflow: ellipsis; functionality:
div { width: 0; min-width: 100%; } The main trick is giving the width something other than auto/percent, and using a min-width of 100%;
div { width: 0; min-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } table.myTable { width: 100%; border-collapse: collapse; } td { border: 1px solid #000; } td.td1 { width: 100%; min-width: 50px; } td.td2 { width: 100px; min-width: 100px; } td.td3 { width: 150px; min-width: 150px; } td.td4 { width: 50%; min-width: 50px; } td.td5 { width: 50%; min-width: 50px; } td.td6 { width: 150px; min-width: 150px; } The table can be fluid sized or fixed width. Just give some min-widths for contents as needed.
<table class="myTable"> <tr> <td class="td1"><div>Very very very long text Very very very long text Very very very long text Very very very long text</div></td> <td class="td2"><div>Content 2</div></td> <td class="td3"><div>Content 3 also so very lonnnnngggg</div></td> </tr> </table> <table class="myTable"> <tr> <td class="td4"><div>Very very very long text Very very very long text Very very very long text Very very very long text</div></td> <td class="td5"><div>Content 2 has very very very many texts in a very very very long way</div></td> <td class="td6"><div>Content 3</div></td> </tr> </table> JSfiddle
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
