CSS - 根据文本宽度设置填充/边距？

Question

CSS中是否有测量单位（已计划或已存在），可根据所用字体的宽度设置填充和边距？

我知道em应该是浏览器使用的字体大写M的高度，这对于添加干净的双倍间距非常方便。但我有时希望内联列表的边距为普通不间断空格的宽度，或者是大写字母A的宽度。对于某些字体，使用em会变得不可靠。

Answer 1

css3的W3C规范定义了一个单位，即字体“0”字符的宽度：

  

ch unit

     

等于用于渲染它的字体中找到的“0”（ZERO，U + 0030）字形的已用预先测量值。

请参阅css3-values。

Answer 2

有趣，但seems that nobody cares关于字体元素的宽度。所测量的一切都是高度：

如果在“古典排版”中就是这种情况，那么对于前排的子类，网络排版的希望就更少了。

编辑：实际上有一个measurement named En指的是“小写字母的宽度”n“。”但是，我还没有在网上看到过这种情况。

Answer 3

我害怕不。 CSS没有提供引用字体属性的方法。

但是，您可以通过在额外的第一个和最后一个列表元素中插入 来逃避。

Answer 4

我提出了一些简单的东西，帮助我解决了基于字体大小的填充问题。我想基于上面一行中的字符串前缀来偏移<td>。 Cliff注释版本，我添加了表示跨度中所需偏移的文本，并使其不可见且不可选。我的解决方案在这里：

.hiddenOffset {
opacity: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}


<table>
  <tr>
    <td>NumElements</td>
  </tr>
  <tr>
    <td><span class="hiddenOffset">Num</span>Offset Text</td>
  </tr>
</table>

这给了我完美的偏移量，前缀是隐藏的，不可选择的。在我的实际代码中，我使用纯JavaScript来指定前缀字符串，因此它不是硬编码的，我使用prefix.repeat(n)来设置嵌套缩进。

function processRepeatingGroupInstance(indent, group) {
    let prefix = 'No';
    let html = '';
    for (let i = 0; i < group.length; i++) {
        let field = group[i];
        if (field.hasOwnProperty('msgvaluedesc'))
            html += `<tr><td><span class="hiddenOffset">${prefix.repeat(indent)}</span>${field.name}</td><td class="num">${field.number}</td><td class="value tooltip">${field.msgvaluedesc}<span class="tooltiptext">${field.msgvalue}</span></td></tr>`;
        else
            html += `<tr><td><span class="hiddenOffset">${prefix.repeat(indent)}</span>${field.name}</td><td class="num">${field.number}</td><td class="value">${field.msgvalue}</td></tr>`;
        if (field.hasOwnProperty('repeating_group')) {
            for (let j = 0; j < field.repeating_group.length; j++)
                html += processRepeatingGroupInstance(indent + 1, field.repeating_group[j]);
        }
    }
    return html;
}