使用CSS换行<label>

Question

我在bootstrap列中有多个复选框，用作地图标记的过滤器。

我使用空<div>元素显示彩色方块，然后显示实际复选框，并使用过滤器名称持续<label>。

<div class="row">
    <div class="map-legend-box" style="background: #42bcf4"></div>
    <input type="checkbox"/>
    <label class="control-label checkbox-label-align">Some text here</label>
</div>

当标签包含一个很长的过滤器名称时，标签将显示在第二行，当我反而希望它显示在第一行时，然后如果它没有显示则会中断到第二行适合第一。

我已经尝试了word-wrap / word-break / white-space属性与CSS的不同组合，但无法使其发挥作用。

我已经创建了Plunker目前的情况。

如何使用CSS在下面的样机图片中看到它？

Answer 1

您必须在.map-legend-box内移动label并将其absolute定位。然后添加一点padding-left为.map-legend-box腾出空间。

＆＃13;

＆＃13;

.row{
  max-width: 200px;
}

label{
  display: block;
  position: relative;
  padding-left: 45px;
}

.map-legend-box{
  width: 20px;
  height: 20px;
}

.box-container{
  position: absolute;
  top: 0;
  left: 0;
}

.box-container * {
  display: inline-block;
}

＆＃13;

<div class="row">
    
    <label class="control-label checkbox-label-align">
      <div class="box-container">
        <div class="map-legend-box" style="background: #42bcf4"></div>
        <input type="checkbox"/>
      </div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat aspernatur, eos harum dicta ullam quam, voluptatibus delectus debitis tenetur, possimus architecto temporibus laborum tempora blanditiis fugiat tempore illo ipsum labore.
  </label>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用flex。这将使工作变得简单。

＆＃13;

＆＃13;

.checkbox-container {
  width: 40px;
  display: flex;
  align-items: center;
  float: left;
}
#square {
  height: 11px;
  width: 11px;
  display: inline-block;
  border-radius: 2px;
}
label {
  display: flex;
}

＆＃13;

<div class="row">
  <div class="checkbox-container">
    <div id="square" style="background: #42bcf4"></div>
    <input type="checkbox" />
  </div>
  <label>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat aspernatur, eos harum dicta ullam quam, voluptatibus delectus debitis tenetur, possimus architecto temporibus laborum tempora blanditiis fugiat tempore.
  </label>
</div>

＆＃13;

＆＃13;

＆＃13;