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?

jsfiddle

<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; } 

http://jsfiddle.net/emturano/udqzp/10/


Comments

Popular posts from this blog

curl - PHP fsockopen help required -

HTTP/1.0 407 Proxy Authentication Required PHP -

c# - Resource not found error -