javascript - JavaScript 中的自动表格布局策略？

Question

Mozilla 提供了他们的自动表格布局算法：

https://developer.mozilla.org/en/docs/Table_Layout_Strategy

有没有人在 JavaScript 库中见过类似的实现？

我想要做的是获取表格 JSON 数据并以与 HTML 的自动表格布局类似的方式计算适当的列宽。我对让浏览器进行布局，然后查看宽度等技巧不感兴趣，我想从原始数据在 JS 中执行计算。

Answer 1

如果不先将文本内容渲染到屏幕上，就无法测量文本内容的宽度（因为您必须应对不同的屏幕分辨率、用户字体设置等）。

虽然有一个例外，但它并不完全准确。canvas 元素具有测量文本尺寸的能力，但根据我的经验，它并不完全准确，因此不值得为了获得不准确的阅读而预先渲染所有内容的麻烦/开销。

其他一些便宜的技巧包括将内容的大小和字体显式设置为可预测的宽度单间距字符字体，然后计算字符串中的字符数......但是在内容的情况下很快就会分崩离析换行/换行以适应容器。您还可以将您的文本“预渲染”到 DOM 中的隐藏容器中（想想 display: hidden 或 z-index:-999）并以这种方式获得容器测量值，但通常情况下这会演变成吨- 列逻辑会随着一些需求的变化而变得笨拙。