Css标签在多行上没有全宽

Question

我无法更好地解释这一点。

请看这个小提琴：https://jsfiddle.net/4vosLvxg/3/

<div class="col-md-12 " style="display: flex;">
   <div class="checkbox">
      <label class="tooltips">
         <input type="checkbox"> Système d'avertissement de collision 
        et frein de secours automatique
      </label>
  </div>
  <a class="tool-tip"></a>
</div>

因为我尝试了所有已知的组合，所以CSS是相关的。

我（我的客户）想要的是使信息量显示在文本（标签）附近，但不在标签内。

要重现此问题，必须调整窗口大小，直到最后一个单词出现在新行上。然后他会看到标签的宽度不会与最长的线一样长。

浪费时间：~14

任何建议/黑客都会这样做。

修改 这更好地解释了：

Answer 1

这就是我认为你要求的。请注意html标记中的更改：

.checkbox {
  display: inline-block;
  position: relative;
  padding-left: 15px;
}
.checkbox input[type=checkbox] {
  float: left;
  margin-left: -15px;
}
.checkbox label {
  text-align: justify;
  display: inline-block;
}

.checkbox a.tool-tip {
  width: 14px;
  background: url("http://www.chromachklist.com/wp-content/uploads/2012/06/InfoButton0.png") right no-repeat;
  padding: 10px;
  position: absolute;
  right: 0;
  top: 0;
}

.tooltips a.tool-tip {
  visibility: hidden;
  position: initial;
  float: right;
}

<div class="col-md-12 " style="display: flex;">
  <div class="checkbox">
    <a class="tool-tip"></a>
    <label class="tooltips">
      <a class="tool-tip"></a>
      <input type="checkbox"> Système d'avertissement de collision et frein de secourssssssssss automatique
    </label>
  </div>
</div>