Daniel B Daniel B - 1 year ago 44
HTML Question

Line break a <label> with CSS

I have multiple checkboxes in bootstrap columns that act as a filter for map markers.

I'm using an empty

element to display a colored square, then the actual checkbox, and last a
with the filter name.

<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>

When the label contains a very long filter name, the label will be displayed on a second line, when I instead would like it to be displayed on the first, and then break to the second line if it doesn't fit in the first.

I've tried a different combination of
properties with CSS, but can't get it to work.

I've created a Plunker of how it is at the moment.

How do I get it to look like in the mockup picture below using CSS?

enter image description here

Answer Source

You have to move the .map-legend-box inside your label and position it absolute. Then add a little bit of padding-left to make room for your .map-legend-box.

  max-width: 200px;

  display: block;
  position: relative;
  padding-left: 45px;

  width: 20px;
  height: 20px;

  position: absolute;
  top: 0;
  left: 0;

.box-container * {
  display: inline-block;
<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"/>
        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.