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

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

18 голосов
/ 04 февраля 2009

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

Поэтому я добавляю «переполнение: скрытый», и дела обстоят несколько лучше, но мне все еще не нравится, как во втором поле есть разрыв строки между переключателем и его меткой: 

 <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/>

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

 <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>

Ответы [ 4 ]

42 голосов
/ 04 февраля 2009

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

<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 голосов
/ 04 февраля 2009

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

1 голос
/ 04 февраля 2009

Если вы не возражаете против менее аккуратной разметки, вы можете получить то, что хотите, просто убрав пробел между текстом <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;).

0 голосов
/ 14 апреля 2012

Решение, предоставленное 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 /> при переносе текста. Проблема заключалась в том, что он разрывал строку после элемента вместо текста в конце строки. Было очень трудно найти эту проблему с помощью поискового механизма, надеюсь, это поможет другим.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...