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><div></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 & 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>
*** Bug 120555 has been marked as a duplicate of this bug. ***
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?