Css标签在多条线上不能全宽显示

我无法更好地解释这一点

请看这把小提琴：

避碰系统
自动变速器
我想这是你想要的。请注意
html
标记中的更改：


.checkbox{
显示：内联块；
位置：相对位置；
左侧填充：15px；
}
.checkbox输入[类型=复选框]{
浮动：左；
左边距：-15px；
}
.复选框标签{
文本对齐：对齐；
显示：内联块；
}
.复选框a.工具提示{
宽度：14px；
背景：url（“http://www.chromachklist.com/wp-content/uploads/2012/06/InfoButton0.png）对，不重复；
填充：10px；
位置：绝对位置；
右：0；
排名：0；
}
.工具提示a.工具提示{
可见性：隐藏；
位置：初始；
浮动：对；
}

自动避碰和安全系统
你能提供你想要的输出的图像吗？@LouieAlmeda我已经用真实作品编辑了我的文章image@Vucko应用内联块或内联并不能解决我的问题您的问题标题是错误的。你的问题是，
标签
确实是全宽的（这就是为什么
i
非常正确的原因）。@AndreiGheorghiu这取决于你如何看待这个问题：）我认为它不是全宽的，因为全宽会适合内容，而且不会溢出。谢谢你花时间回答我的问题！现在，我将部分使用您提供的第一个解决方案（这是它最初的实现方式）。我以前没有使用此解决方案的原因是，单击“信息”按钮时，它会切换复选框。我不会接受你的回答，因为它不能回答我的问题。如果您查看第二个屏幕截图，您将看到标签延伸到包含文本之外。如果您检查包含文本，它将一直延伸到
i
。添加背景，您将看到它确实存在。在您的示例中，确实存在，但在我的示例中，标签扩展到了最后一个单词之外。我更新了答案并删除了以前的版本。我想这就是你一开始想要的，对吧？是的！非常感谢D
<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>