Разрыв строки <label>с помощью CSS</label>
У меня есть несколько флажков в столбцах начальной загрузки, которые действуют как фильтр для маркеров карты.
Я использую пустой элемент <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?
Вы должны перенести поле .map-legend-box внутри своего label и установить его absolute. Затем добавьте немного padding-left чтобы освободить место для вашего .map-legend-box.
.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;
}
<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>
Используйте flex. Это упростит работу.
.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;
}<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>