css3 - CSS div-table and text-overflow:ellipsis -
i have div display of table. want table take 100% of page. within table 1 row several cells (display style of table-cell). goal css solution allows table-cells show ellipsis if text long. have put simple example jsfiddle shows issue.
can lead me in right direction cells show ellipsis?
<div class="table-wrap-wrapper"> <div class="table"> <div class="table-row"> <div class="table-cell data"> <span>this_is_a_really_long_username_that_is_too_long</span> </div> <div class="table-cell"> </div> <div class="table-cell data"> <span>this_is_a_really_long_emailaddress_that_is_too_long</span> </div> <div class="table-cell"> </div> <div class="table-cell data"> <span>this_is_a_really_long_string_that_is_too_long</span> </div> </div> </div> </div>
use max-width on .table-cell fix it:
.table-cell { max-width: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
Comments
Post a Comment