javascript - 如何使最小宽度为 3 位数？

Question

如何使表格中的每个单元格的最小宽度为 3 位并且不会大很多？现在我正在硬编码min-width，但我不喜欢硬编码一个值，因为我将来可能想更改字体。如果需要 javascript 也没关系。

<!DOCTYPE html>
<html>
<head>
    <style>
        td { min-width: 27px; }
    </style>
</head>
<body style="font-family:sans-serif">
    <table border="1">
        <tr>
            <td>1</td>    <!-- width: 27 -->
            <td>23</td>   <!-- width: 27 -->
            <td>456</td>  <!-- width: 27 -->
            <td>7890</td> <!-- width: 36 -->
        </tr>
    </table>
</body>
</html>

score 2 · Accepted Answer

我会使用min-width: 3em;,3em是您定义的字体大小的 3 倍。

这意味着您可以增加表格的字体大小，宽度也会相应增加。

score 2 · Accepted Answer

理论上最好的方法是将最小宽度设置为3ch，因为ch根据定义，单位表示数字零的宽度，“0”。在大多数字体中，数字具有相同的宽度，尽管在某些字体中，数字一个“1”可能比其他字体更窄，原则上，没有法律禁止设计所有数字具有不同宽度的字体。但在大多数情况下，ch等于数字的宽度（并且是字符平均宽度的一个很好的近似值）。

为了应对较旧的浏览器，您可以以em单位设置最小宽度，但这将是猜测。作为一个粗略的经验法则，字符的平均宽度和数字的宽度约为0.4em，但这因字体而异，在这里使用更安全0.5em。所以考虑这样设置：

td { 
  min-width: 1.5em;
  min-width: 3ch;
}

这里的重点是现代浏览器将应用后一种声明。较旧的浏览器将忽略它并改用前者。

score 1 · Accepted Answer

td {
    text-overflow: ellipsis; /* will make [...] at the end if you need*/
    width: 3em; /* change to your preferences */
    white-space: nowrap; /* paragraph to one line */
    overflow:hidden; /* older browsers */
    }

这在 CSS 中是不可能的，你必须使用 Javascript。

阅读此答案：https ://stackoverflow.com/a/2757498/1827690

score 0 · Accepted Answer

如何使用不同的单位 em ( CSS Units )。

<style>
    td { min-width: 3em; }
</style>

宽度应该是m当前使用的字体中字母宽度的 3 倍。

score -1 · Accepted Answer

你有两个选择：

我的建议是：添加一个类min-width并将这个类添加到你的css，这样你只需要替换一次值。
第二个选项（我不建议这样做）是通过 javascript 计算宽度：用 JavaScript 计算文本宽度。请注意，这可能因字符而异，因为在非等宽字体中 m 比 i 大。

javascript - 如何使最小宽度为 3 位数？

5 回答 5

Related

Reference