如何防止必填字段标签的星号单独换行？

我之前也碰到过这个情况！你遇到的问题大概是这样的：

核心原因是:after生成的星号默认是 inline 元素，当标签文本换行到最后一行时，如果剩余空间放不下星号，它就会被挤到单独一行。咱们只需要微调CSS，就能在保留标签文本正常按单词换行（长标签可跨多行）的前提下，避免星号单独换行。

修改后的CSS方案 #

关键是给星号伪元素添加white-space: nowrap，让它和前面的最后一段文本绑定在一起，不会被拆分换行；同时给标签加上overflow-wrap: break-word确保长单词能正常换行：

form { 
  border: 1px solid lightgray; 
  padding: 1em; 
  width: 10em; 
} 
label, input { 
  display: block; 
  width: 100%;
  overflow-wrap: break-word; /* 保证长文本按单词正常换行 */
} 
label.required:after { 
  color: red; 
  content: " *";
  white-space: nowrap; /* 让星号与前面的文本最后部分不拆分 */
}

完整代码示例 #

HTML部分 #

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

这样调整后，标签文本会正常按单词换行，哪怕长标签跨2-3行，星号也会始终跟在标签的最后一个内容后面，不会单独出现在一行。

内容的提问来源于stack exchange，提问作者Yonder