如何确定实际显示的CSS3列数（与指定的列数相比）？

Question

我有一个标签列表，这些标签位于我指定为具有多列的框中：

#tags {
  -webkit-columns: 140px 5;
}

结果：

此列表的内容是动态生成的。

当我调整浏览器窗口大小时，列数会折叠。 e.g：

使用jQuery / JS / CSS /等，如何确定在任何给定时间显示的列数？

Answer 1

除非您指定了所有与列宽相关的属性，否则浏览器将尝试在内容区域中填充整列数（在元素的左右填充之间）。所以(contentWidth + columnGap)/(columnWidth + columnGap)四舍五入会给你结果。

请注意，右侧填充可能设置得太高，以至于整列都能够适合那里 - 您可能需要调整计算。

如果列文本中的元素宽度为100％，也可以直接获取列的大小。

Answer 2

你可以得到这样的价值：

$('#tags').css('-webkit-column-count');

尝试提醒：

alert($('#tags').css('-webkit-column-count'));

Answer 3

与Alexei的答案类似，我找到了一个获得列数的解决方案：

  var $tags = $("#tags"),
      column_width = $tags.children(':first').width(),
      container_width = $tags.width(),
      column_count = Math.floor(container_width / column_width); // in my case, sum of column gaps is less than the width of a column, so I can round down.