CSS - Длинные блоки текста с полями ввода

Question

У меня есть веб-страница, использующая Bootstrap 3. На этой веб-странице отображаются некоторые переключатели. Мои переключатели стилизованы, поэтому у меня есть элемент добавления. Тем не менее ярлыки для этих переключателей довольно длинные. В это время, они делают так:

• This is my label. It can be rather long and 
wrap to the next line. There could be four or 
even more lines. 

Однако я хочу, чтобы они делают так:

• This is my label. It can be rather long and 
    wrap to the next line. There could be four or 
    even more lines. 

Обратите внимание, как текст метки появляется отступом. Это оправдано остальной частью текста. В попытке сделать это, я следующее:

<div style="width:200px;"> 
    <label class="my-radio"> 
    <input data-val="true" id="myChoice" name="myChoice" type="radio" value="1"> 
    <span class="my-indicator">♥</span> 
    This is a long block of block of text that should wrap. But, the second line should be indented   
    </label> 
</div> 

Как показано в этом Bootply, текстовая метка не отступом. Я не уверен, что делать. Мне нужно щелкнуть либо сам переключатель, либо текст, чтобы выбрать элемент. По этой причине я не использую таблицу.

Answer 1

Вы можете использовать отрицательный запас (bootply):

CSS

.my-radio { 
    padding-left:30px; 
} 
.my-radio input { 
    margin-left:-20px; 
} 

HTML

<div style="width:200px;"> 
    <label class="my-radio"> 
    <input data-val="true" id="myChoice" name="myChoice" type="radio" value="1"> 
    <span class="my-indicator">♥</span> 
    This is a long block of block of text that should wrap. But, the second line should be indented 

    </label> 
</div> 

Answer 2

Если решение гибкой коробки приемлемо, вы можете попробовать разместить текстовое содержимое внутри контейнера и применить гибкую коробку к родительскому label. Отрегулируйте ширину согласно вашему требованию.

label { 
 
    width: 320px; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: no-wrap; 
 
    align-items: flex-start; 
 
    justify-content: space-between; 
 
} 
 
label input { 
 
    margin-right: 10px; 
 
}

<div style="width:200px;"> 
 
    <label class="my-radio"> 
 
    <input data-val="true" id="myChoice" name="myChoice" type="radio" value="1"> 
 
    <section> 
 
     <span class="my-indicator">♥</span> 
 
     This is my label. It can be rather long and wrap to the next line. There could be four or even more lines. 
 
    </section> 
 
    </label> 
 

 
</div>

Answer 3

.my-radio { 
 
    padding-left: 35px; 
 
    position: relative; 
 
    display: inline-block; 
 
    max-width: 100%; 
 
    margin-bottom: 5px; 
 
    font-weight: 700; 
 
} 
 
#myChoice { 
 
    position: absolute; 
 
    left: 5px; 
 
    top: 0; 
 
}

<div style="width:200px;"> 
 
    <label class="my-radio"> 
 
    <input data-val="true" id="myChoice" name="myChoice" type="radio" value="1"> 
 
    <span class="my-indicator">♥</span> 
 
    This is a long block of block of text that should wrap. But, the second line should be indented   
 
    </label> 
 
</div>