Как предотвратить разрывы строк между переключателем и его меткой, сохраняя при этом разрывы строк внутри самой метки?
Я хотел бы убедиться, что между переключателем и началом его соседней метки никогда не будет разрыв строки. Тем не менее, я хочу, чтобы текст внутри метки был разрешен для переноса. Это возможно? Вы можете увидеть мои неудачные попытки, предоставив следующий 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>
и первым символом метки, используйте объект без разрыва (
).
Ответ 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 в обертке текста. Проблема заключалась в том, что он разбил бы строку после элемента вместо текста в конце строки. Было очень сложно найти эту проблему с помощью поисковой машины, я надеюсь, что это поможет другим.