Question

亲爱的css专家：在我的领域，通常用数字表示*的统计显着性。我知道我可以将所有星星放在他们自己的td字段中然后使用css以便数字对齐，但我想知道这是否可以在本地css中完成。意图是有能力重新调整数字：

<html>

<head> <style type="text/css"> td { text-align:right; } </style> </head>

<body>

<table>

<tr> <th>c</th> </tr>
<tr> <td>1</td> </tr>
<tr> <td>11</td> </tr>
<tr> <td>111</td> </tr>
<tr> <td>1111</td> </tr>
<tr> <td>11<sup style="text-width:0pt">**</sup></td> </tr>

</table>

</body>

可能？

Answer 1

如果我理解正确，你想通过css添加'*'。你可以这样做：

td:after {
    content: '*';
    font-size: .8em;
    vertical-align: top;
}

<强> DEMO

Answer 2

是的，这是可能的，这是一个新颖的想法（至少对我来说是新的）。这个想法显然是有一个带有数字的列，与最后一个数字对齐，但在一些数字的右边有一个或多个字符（这里是星号）。将这些字符包装到元素中，将元素的宽度设置为零，并让内容溢出（overflow: visible，默认值）完成工作。但是，宽度需要使用width属性设置，这对内联（文本级）元素没有影响，默认情况下sup是内联的，因此需要通过制作它来修复内联块（受width属性影响）：

<style>
td { text-align:right; }
.after { display: inline-block; width: 0; }
</style>
...
<tr> <td>11<sup class=after>**</sup></td> </tr>

我使用了与问题相同的标记。但是，sup元素有几个技术问题（例如，它可能导致行错位），因此我会使用span代替。如果需要，您可以使用上标样式设置样式。但是例如芝加哥样式手册，第3.78节，在此上下文中使用文本中的简单星号“*”字符，不会尝试抬起位置或缩小字体大小。关键在于，在任何许多常用字体中，星号本身通过排版设计，类似上标：基线以上且相对较小。

以下是使用此技术的测试的屏幕截图，首先使用sup，然后在最后一行使用span。字体是Cambria。

enter image description here

css创建零宽度非空格字符串

2 个答案: