Разрыв строки <label>с помощью CSS</label>

58
7

У меня есть несколько флажков в столбцах начальной загрузки, которые действуют как фильтр для маркеров карты.

Я использую пустой элемент <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?

enter image description here

спросил(а) 2016-09-29T14:31:00+03:00 3 года, 12 месяцев назад
1
Решение
81

Вы должны перенести поле .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>

ответил(а) 2016-09-29T14:37:00+03:00 3 года, 12 месяцев назад
56

Используйте 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>

ответил(а) 2016-09-29T14:48:00+03:00 3 года, 12 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема