UNCONFIRMED 121366
Wrong Column Width in Multicolumn Layout 
https://bugs.webkit.org/show_bug.cgi?id=121366
Summary Wrong Column Width in Multicolumn Layout
Cyber Hymnal™
Reported 2013-09-14 12:57:53 PDT
When a multicolumn <div> is enclosed in another <div> with display:table-cell, the column width is too small, causing text truncation. The following HTML illustrates the problem. ____________________________________________________ <?xml version="1.0" encoding="utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Song of Haiawatha</title> <style type="text/css"> .poem { column-count: 2; column-gap: 0; column-rule: 2px solid gray; -moz-column-count: 2; -moz-column-gap: 0; -moz-column-rule: 2px solid gray; -webkit-column-count: 2; -webkit-column-gap: 0; -webkit-column-rule: 2px solid gray; padding: 1em 0; white-space: nowrap; border: 8px ridge silver; border-radius: 20px 20px 20px 20px; } div p { margin: 0 1em 2ex !important; } figcaption { text-align:center; } .cell { display: table-cell; vertical-align: middle; } .row { display: table-row; } .tbl { display: table; margin: auto; } </style> </head> <body> <p>So far, so good.</p> <div class="poem"> <p>By the shore of Gitche Gumee,<br /> By the shining Big-Sea-Water,<br /> At the doorway of his wigwam,<br /> In the pleasant Summer morning,<br /> Hiawatha stood and waited.</p> <p>All the air was full of freshness,<br /> All the earth was bright and joyous,<br /> And before him, through the sunshine,<br /> Westward toward the neighboring forest<br /> Passed in golden swarms the Ahmo,<br /> Passed the bees, the honey-makers,<br /> Burning, singing in the sunshine.</p> <p>Bright above him shone the heavens,<br /> Level spread the lake before him;<br /> From its bosom leaped the sturgeon,<br /> Sparkling, flashing in the sunshine;<br /> On its margin the great forest<br /> Stood reflected in the water,<br /> Every tree-top had its shadow,<br /> Motionless beneath the water.</p> </div> <br /> <hr /> <p>Here’s where the problem happens: When the text is enclosed in a <code>&lt;div&gt;</code> with <code>display:table-cell</code>, Chrome truncates the text. Chrome seems to be computing an overall width big enough to hold the longest text line, resulting in a column width that is too narrow.</p> <p>Firefox 23 &amp; Internet Explorer 10 do not exhibit this problem.</p> <div class="tbl"><div class="row"><div class="cell"><div class="poem"> <p>By the shore of Gitche Gumee,<br /> By the shining Big-Sea-Water,<br /> At the doorway of his wigwam,<br /> In the pleasant Summer morning,<br /> Hiawatha stood and waited.</p> <p>All the air was full of freshness,<br /> All the earth was bright and joyous,<br /> And before him, through the sunshine,<br /> Westward toward the neighboring forest<br /> Passed in golden swarms the Ahmo,<br /> Passed the bees, the honey-makers,<br /> Burning, singing in the sunshine.</p> <p>Bright above him shone the heavens,<br /> Level spread the lake before him;<br /> From its bosom leaped the sturgeon,<br /> Sparkling, flashing in the sunshine;<br /> On its margin the great forest<br /> Stood reflected in the water,<br /> Every tree-top had its shadow,<br /> Motionless beneath the water.</p> </div></div></div></div> </body> </html>
Attachments
Add attachment proposed patch, testcase, etc.
Cyber Hymnal™
Comment 1 2013-09-14 12:59:47 PDT
*** Bug 120555 has been marked as a duplicate of this bug. ***
Ahmad Saleem
Comment 2 2023-03-25 16:54:50 PDT
I changed Testcase from Comment 0 in JSFiddle with the link in URL field. Only bit I see different in Safari Technology Preview 166 is 'content distribution' and 'grey' broder issue. Although I don't have column width is too small issue, which is this bug referring. Should we rename this bug title or close this or have separate for above two issues?
Note You need to log in before you can comment on or make changes to this bug.