W3C home > Mailing lists > Public > www-style@w3.org > January 2015

Re: [css-break] slicing content

From: Håkon Wium Lie <howcome@opera.com>
Date: Tue, 27 Jan 2015 11:22:26 +0100
Message-ID: <21703.26338.290921.351144@opera.com>
To: Andrei Bucur <abucur@adobe.com>
Cc: www-style@w3.org
Andrei Bucur wrote:

 > >Consider this test case:
 > >
 > >  http://www.wiumlie.no/2014/tests/multicol-clip.html
 > >
 > >which has three-column fixed-height elements with a tall image and some
 > >large-font text; neither the image nor the large-font text fit into
 > >the fixed-width element.
 > >
 > >Webkit-derived implementations resolve this overconstrained situation
 > >by slicing the image and the text into "stripes" that are placed in
 > >different columns. The thinking is, presumably, that as much content
 > >as possible should be visible.
 > There’s a little more to this behaviour in WebKit. The image will be 
 > pushed in the next column only if slicing is avoided by doing so. In this 
 > case, the image is taller than one column so slicing is not avoidable (per 
 > WebKit's initial fragmentation design). Try to set the height of the image 
 > to 100px and you’ll notice it will be positioned in the second column.

Yes, it's not quite as crazy as the test case indicates :-)

For replaced content, one can also set:

  .multicol { height: 500px }
  .multicol img { max-height: 500px }

But the result is wasted space -- both in the column before the image,
and most likely in the column of the image (if the image doens't fill
the whole width when scaled down).


              Håkon Wium Lie                          CTO °þe®ª
howcome@opera.com                  http://people.opera.com/howcome
Received on Tuesday, 27 January 2015 10:22:52 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:50 UTC