Как предотвратить разрывы строк между переключателем и его меткой, сохраняя при этом разрывы строк внутри самой метки?

Я хотел бы убедиться, что между переключателем и началом его соседней метки никогда не будет разрыв строки. Тем не менее, я хочу, чтобы текст внутри метки был разрешен для переноса. Это возможно? Вы можете увидеть мои неудачные попытки, предоставив следующий HTML:

<html>
 <head>
   <style type="text/css">
.box {
  border: solid gray 2px;
  width: 200px;
  margin: 5px;
}
.chopped {
  overflow: hidden;
}
   </style>
 </head>
<body>

Коробки должны быть фиксированной ширины, поэтому длительный контент должен быть обернут, как показано в первом окне ниже. И если кто-то пытается опубликовать смехотворно длинную строку без каких-либо пробелов, нам нужно, чтобы она была усечена, а не выходила за край поля - проблема видна во втором поле:

 <div class="box">
  <input type="radio"/>
  <label>This is a really long string with no spaces</label>
 </div>

 <div class="box">
  <input type="radio"/>
  <label>This_is_a_really_long_string_with_no_spaces</label>
 </div>

 <hr/>

Итак, я добавляю "overflow: hidden", и все немного лучше, но мне все еще не нравится, как второй блок имеет разрыв строки между радиокнопом и его меткой:

 <div class="chopped box">
  <input type="radio"/>
  <label>This is a really long string with no spaces</label>
 </div>

 <div class="chopped box">
  <input type="radio"/>
  <label>This_is_a_really_long_string_with_no_spaces</label>
 </div>

 <hr/>

Если я добавляю <nobr> , радиокнопки находятся рядом с их метками, и поэтому неизменная строка теперь выглядит идеально. Однако это разбивает первую строку (ту, что содержит пробелы), поскольку она больше не обертывается:

 <div class="chopped box">
  <nobr>
    <input type="radio"/>
    <label>This is a really long string with no spaces</label>
  </nobr>
 </div>
 <div class="chopped box">
  <nobr>
    <input type="radio"/>
    <label>This_is_a_really_long_string_with_no_spaces</label>
  </nobr>
 </div>

</body>
</html>

ОТВЕТЫ

Ответ 1

Сначала переместите радиокнопки внутри ваших меток. Это добавляет приятную функцию, которую вы можете выбрать радиокнопками, нажав на текст. Затем добавьте пробел вокруг текста.

<div class="chopped box">
 <label>
  <input type="radio"/>
  <span class="wrappable">This is a really long string with no spaces</span>
 </label>
</div>

<div class="chopped box">
 <label>
  <input type="radio"/>
  <span class="wrappable">This_is_a_really_long_string_with_no_spaces</span>
 </label>
</div>

Во-вторых, добавьте следующий стиль в ваш css:

label {
    white-space:nowrap;
}

.wrappable {
    white-space:normal;
}

Стиль белого пространства на ярлыке предотвращает разрыв линии между радиокнопкой и текстом, а диапазон вокруг текста позволяет обернуть его внутри текста.

Ответ 2

Вы попробовали white-space: nowrap; внутри вашего .chopped определения?

Ответ 3

Если вы не против менее аккуратной разметки, вы можете получить то, что хотите, просто исключив пробел между текстами <input> и <label>.

<div class="chopped box">
    <label><input type="radio"/>This is a really long string with no spaces</label>
</div>

<div class="chopped box">
    <label><input type="radio"/>This_is_a_really_long_string_with_no_spaces</label>
</div>

(<label> помещается вокруг <input> на предложение JacobM.)

Если вы хотите немного места между <input> и первым символом метки, используйте объект без разрыва (&nbsp;).

Ответ 4

Решение, предоставленное JacobM, для этого особого случая - наилучшее решение. Но эта проблема выходит за рамки некоторых радиокнопок с их ярлыками. Мое решение в целом:

In line text blabla <span style="white-space: normal;"><element /></span> blabla

Таким образом, в качестве решения для этого конкретного случая результатом будет:

<label>
    <span style="white-space: normal;">
        <input type="radio" />
    </span>
    This_is_a_really_long_string_with_no_spaces
</label>

PS: Моя ситуация была элементом <input /> inline в обертке текста. Проблема заключалась в том, что он разбил бы строку после элемента вместо текста в конце строки. Было очень сложно найти эту проблему с помощью поисковой машины, я надеюсь, что это поможет другим.