Question

首先，该问题的解决方案：CSS selector to bold only labels without child elements无法解决我的问题。

我的标签只包含文字，其他标签包含文字和子输入，选择和textarea表格的元素。

即：

<label class="control-label">State
            <select name="status" id="status" class="form-control">
                <option value="">Choose..</option>
                                ...
                            </select>

        </label>

和其他类似：

<label for="defect" class="control-label">Error</label>

我需要将white-space: nowrap设置为仅包含子HTML元素的标签，并且如上所述，我尝试了以下问题：

label{
  white-space: nowrap; /* Label without HTML*/
}
label + label {
  white-space: normal; /* Label with HTML */
}

然而，它不起作用。

Answer 1

一种解决方案是在元素中添加一个类，并使用CSS对其进行格式化。

label.empty { white-space: nowrap; }

指向文档的链接： https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors

其他评论指向使用:empty，但在您的情况下，<label>包含一些文字，不适用于空

Answer 2

AFAIK没有使用CSS选择器的解决方案。 @FabioPontes提出的通过附加类名控制的解决方案将是最直接的。

以下是一个javascript解决方案，用于验证元素的子节点并应用white-space:nowrap if（1）只有一个子节点和（2）此节点是text类型。请查看node types。

＆＃13;

var elements = document.getElementsByClassName("control-label");

for (i = 0; i < elements.length; i++) {
  if (elements[i].childNodes.length == 1 && elements[i].childNodes[0].nodeType == 3) {
    elements[i].style.whiteSpace = "nowrap";
  }
}

＆＃13;

<div>

  <label class="control-label">State - we need a really long text to check if the white-space nowrap is actually working so lets place this text here.
    <select name="status" id="status" class="form-control">
      <option value="">Choose..</option>
    </select>

  </label>
</div>

<div style="margin-top:20px;">

  <label for="defect" class="control-label">Error - we need a really long text to check if the white-space nowrap is actually working so lets place this text here.</label>
</div>

＆＃13;

Answer 3

Fabio Pontes已经提出了添加类的选项，这是一个很好的选项，但是如果你不想添加类，这里有几个选项。

您可以做的第一件事就是修改标记以将每个label包装在div中，然后利用:only-child伪选择器。为了实现这一点，您必须将select元素包含为label的兄弟，而不是其子元素。

.control-label-wrapper label:only-child {
  white-space: nowrap;
}

<div class="control-label-wrapper">
  <label class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut tellus massa. Phasellus dictum mollis lobortis.</label>
  <select name="status" id="status" class="form-control">
    <option value="">Choose..</option>
  </select>
</div>

<div class="control-label-wrapper">
  <label for="defect" class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut tellus massa. Phasellus dictum mollis lobortis.</label>
</div>

可能根本不需要修改makup的另一个选项是使用attribute selector。也许你已经在为所有这些无子标签使用了一个属性。您问题中的示例HTML表明您可能是。

label[for="defect"] {
  white-space: nowrap;
}

<label class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut tellus massa. Phasellus dictum mollis lobortis.
  <select name="status" id="status" class="form-control">
    <option value="">Choose..</option>
  </select>
</label>

<label for="defect" class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut tellus massa. Phasellus dictum mollis lobortis.</label>

没有子元素的标签的CSS选择器

3 个答案: