html - 防止强制字段星号标签换行

Question

我有以下带有标签和字段的简单表单:

<form>
  <label for="field" class="required">
    Field label which wraps:
  </label>
  <input type="text" id="field">
</form>

以及以下 CSS:

form {
  border: 1px solid lightgray;
  padding: 1em;
  width: 10em;
}

label, input {
  display: block;
  width: 100%;
}

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

这会使星号 (*) 换行。我怎样才能防止这种情况发生，同时仍然能够像往常一样将标签包裹在单词上？这意味着如果我在标签中添加更长的字段描述，它必须能够在需要时跨越 2-3 行。

参见示例:https://codepen.io/Yonder/pen/aKopww

Answer 1

不幸的是，唯一的方法是将每个标签的最后一个词包装在自己的容器中。

form {
  border: 1px solid lightgray;
  padding: 1em;
  width: 10em;
}

label, input {
  display: block;
  width: 100%;
}

label span {
  white-space: nowrap;
}

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

<form>
  <label for="field" class="required">
    Field label which <span>wraps:</span>
  </label>
  <input type="text" id="field">
</form>

<br/>

<form>
  <label for="field" class="required">
    Field label which wraps over multiple <span>lines:</span>
  </label>
  <input type="text" id="field">
</form>