html - CSS 列未显示 Chrome 55 中的所有内容

Question

最新稳定的 Chrome 55 不会显示在具有“列”css 属性的元素中流动的所有内容。 Chrome 53 和 54 工作正常。

您可以在下面看到 Chrome 55 的顶部，下面是 Chrome 54。两者以不同方式呈现相同的代码段。当我在 Elements 开发工具中选择它们时，您可以看到“隐藏”元素。这是jsfiddle的直接链接: https://jsfiddle.net/tykvx3re/9/

即使简单的文本在列中流动，它也不会显示: https://jsfiddle.net/tykvx3re/12/

CSS:

.cssColumns {
  width:400px;
  height:200px;
  overflow: scroll;
  columns: 5;
  -webkit-columns: 5;
}

HTML:

<div class="cssColumns">
Some very long text.... 
</div>

是我做错了什么，还是 Chrome 55 真的存在错误？ 如果有人可以建议解决方法，我将不胜感激。

Answer 1

对于那些感兴趣的人，这里是我为这个错误找到的解决方法。

我结束了使用 Flexbox 布局模拟“列”属性。您可以在此处查看示例:https://jsfiddle.net/tykvx3re/14/

它对我有用，因为我的容器都具有相同的宽度。对于那些想要模拟文本流的人，您需要将文本分成具有相同长度的单独 block 。你可以这样做:

CSS:

.cssColumns {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  width: 400px;
  height: 200px;
  flex-flow: column wrap;
  overflow: scroll;
}

.cssColumns span {
  margin-right: 15px;
  display: block;
}

HTML:

<div class="cssColumns">
Some very long text.... 
</div>

Js:

$(function() {
  //Break the text into blocks, after the 20th char
  $(".cssColumns").html(("<span>" + $(".cssColumns").html().replace(/.{20}\S*\s+/g, "$&@").split(/\s+@/).join("</span><span>") + "</span>"));
});

这是它如何堆叠在一起的: https://jsfiddle.net/tykvx3re/16/