On Thu, Mar 8, 2012 at 5:54 PM, David Thorp <mailingli...@allaboutabundance.com> wrote: > Hi Vince, > > Thanks for another helpful reply. That all makes sense. > > One small problem with the nowrap... > > See this: > > http://www.davidthorp.name/testingstuff/browser-0b.html > http://www.davidthorp.name/testingstuff/browser-0b.css > > I've created a couple of really long values in the list and the problem is > the nowrap makes the length of the text override the width of the column. > How do i get the column width to override the text and just cut the text off > in each cell (<td>) not over the whole row?
Sorry, I forgot about that. You'll want to set the table-layout property for the affected table to fixed (at about line 148 of http://www.davidthorp.name/testingstuff/css/browser-0b.css). Then set the overflow:hidden for the affected table cells (line 160ish) > (Then if there's a way to make it automatically add an ellipsis (...) at the > end of a row of text that's been cut short, that would be even more awesome. > ie. "a really really rea…") ;) There's a text-overflow:ellipsis property you can set. Support isn't perfect, but I think other browsers will simply ignore the property. So, browsers that support it will show the ellipsis and browsers that don't will just cut off the text. I haven't tested this thoroughly: .list td { padding: 1px 10px; white-space: nowrap; overflow: hidden; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; } (also note the vendor-specific -ms- and -o- versions) ref: https://developer.mozilla.org/en/CSS/text-overflow -- Vince Aggrippino Ghodmode Development http://www.ghodmode.com > Thanks! > David. ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
