css - 防止需要：在内容换行之后

Question

我们目前在表单上使用 label.required:after 来指示必填字段，如下所示：

<tr>
    <td><label for="loginName" tag="" class="required">Login name:</label></td>
    <td><input type="text" name="loginName" id="loginName" value="" maxlength="64" required="required" /></td>
    <td></td>
</tr>

这是使用以下 CSS 标记的：

label.required:after {
    content:" *";
}

随着表格大小的改变，它会将一些星号推到自己的新行上。有没有办法阻止它这样做（除非标签本身换到第二行）。

如果可以的话，宁愿只修改 label.required 类，但如果它们很好地解决了问题，则可以使用其他方法。

Answer 1

在 * 之前放置一个不间断空格，而不是普通空格。由于您使用的是 CSS，因此您需要使用转义序列\00a0而不是 HTML 实体 ：

label.required:after {
    content:"\00a0*";
}