2013-03-01 1:43, Rick Gordon wrote:
I believe that adding
-webkit-column-break-after: avoid;
-webkit-column-break-before: avoid;
-webkit-column-break-inside: avoid;
... will cover for Webkit browsers.
Ah, I forgot those nonstandard properties. It's difficult to find out
what works on different WebKit browsers on different platforms.
According to the Safari CSS Reference
http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Introduction.html#//apple_ref/doc/uid/TP40002050
(which lists the properties under "Tables"!) these properties are "
Available in Safari 3.0 and later. Available in iOS 2.0 and later."
In my tests in Safari and Chrome on Win 7, adding
dt { -webkit-column-break-after: avoid; }
dd { -webkit-column-break-before: avoid; }
dt, dd { -webkit-column-break-inside: avoid; }
stops the browsers from breaking inside a dd element (where it otherwise
breaks column when needed), but they do not stop them from breaking
between a dt and a dd, even though the code tries to do that two ways.
Within a dl element, there is no valid way to wrap e.g. a dt and a dd in
a container, because dt and dd must be children of dl. But if some other
markup is used instead of dl, e.g. a sequence of div elements each
containing two children (corresponding to dt and dd), then the desired
column layout would presumably be achieved on IE 10, Opera, and WebKit
browsers - using just break-inside: avoid and
-webkit-column-break-inside: avoid on the div elements.
Yucca
______________________________________________________________________
css-discuss [[email protected]]
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/
