css - How can I truncate text in a div or cell as the browser resizes -


i have row consisting of icon/text/timestamp in header section of html page. want have icon , timestamp of row remain @ fixed width, , when browser resizes, want reduce size of text div (table-cell) having ellipsis appear. while can ellipsis appear fixed width, want width of text div (table-cell) 100% until browser gets smaller, want text div smaller , ellipsis appear div shrinks.

i solve problem media queries, or directive resize dynamically, hoping html/css solve it.

is possible?

here sample: http://jsfiddle.net/em83b/

<div style="display: table; table-layout: fixed;">     <div style="display: table-cell; background: pink; min-width: 60px;">         aaa     </div>      <div style="display: table-cell; background: yellow; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; min-width: 300px; max-width: 600px;">         text want have truncated browser resizes     </div>      <div style="display: table-cell; background: lightblue; min-width: 100px;">         ccc     </div> </div> 

text-overflow: ellipsis works when you've set white-space: nowrap


Comments

Popular posts from this blog

php - regexp cyrillic filename not matches -

c# - OpenXML hanging while writing elements -

sql - Select Query has unexpected multiple records (MS Access) -