Previous Message
Next Message

Safari, table cells, and overflow:hidden

Sent by Philippe Wittenbergh on 5 September 2005 04:04

On 5 Sep 2005, at 6:21 am, Stuart Homfray wrote:

> Christian Heilmann wrote:
>> On 9/3/05, Stuart Homfray wrote:
>>> I'm having a spot of trouble with the Safari browser and the
>>> overflow:hidden declaration when applied to table cells.
>>> ...
>> have you tried setting the TDs as block?
> Thanks for the response Chris, but if you do that, the cells will  
> simply behave as block elements and appear one above the next (which  
> they do on both Firefox and Safari if you add this declaration - no  
> surprise that IE still works though!! :)
> Your suggestion led me to trying display:inline-block and this (on  
> Safari) stretched each table cell to accomodate it's contents (giving  
> an unusual 'staggered' effect - each row measuring as wide as it's  
> total contents!) By the way, Firefox and IE ignored this one.

It is a known weakness in Safari; there is currently no way to apply  
the overflow-property to table elements.
And changing the display value of the table-cell won't work, because  
then it is not a table-cell anymore !

One thing you can try, is playing with the css3 'word-wrap' property  
According to an Apple document [2], this is supported by Safari (1.3 +  
only ?), confirmed by a quick test.

So, this:
p.abx {word-wrap:break-word;}
ought to solve the problem for Safari (the long words will wrap in your  
tds, instead of overflowing to the next td.
(this is supported by IE win as well, so hide it if needed).

One thing, though: it doesn't work in combination with  
'white-space:nowrap'. That makes sense in a way.
Let us know how it turns out.

Safari 1.3 also supports  'text-overflow' (see the list in [2]). This  
would probably be even better. I didn't find any reference to the  
correct syntax, though.

[1] <>

Philippe Wittenbergh

css-discuss [EMAIL-REMOVED]]
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread:

Possibly related: