javascript - 実際に表示されているCSS3列の数を特定する方法(指定された列数に対して)?

Question

複数の列を持つように指定したボックスにあるタグのリストがあります。

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

結果：

このリストの内容は動的に生成されます。

ブラウザー ウィンドウのサイズを変更すると、列の数が崩れます。例えば：

jQuery / JS / CSS / などを使用して、特定の時点で表示されている列の数を特定するにはどうすればよいですか?

Answer 1

列幅に関連するすべてのプロパティを指定しない限り、ブラウザーはコンテンツ領域 (要素の左右のパディングの間) に列全体を収めようとします。したがって、(contentWidth + columnGap)/(columnWidth + columnGap)四捨五入すると結果が得られます。

右側のパディングが非常に高く設定されている可能性があるため、列全体がそこに収まる可能性があることに注意してください。計算を調整する必要がある場合があります。

列のテキスト内に幅が 100% の要素がある場合は、列のサイズを直接取得することもできます。

Answer 2

次のように値を取得できます。

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

これを警告してみてください：

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