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
Post a Comment