Не сворачивающийся, но все еще (строчный) разрываемый пробел в HTML?

StackOverflow https://stackoverflow.com/questions/605360

  •  03-07-2019
  •  | 
  •  

Вопрос

Что я могу использовать в HTML, если я хочу, чтобы в середине строки был пробел, который выглядит как три пробела, но все равно может быть разбит, если строка станет слишком длинной?

Обычный пробел сворачивается (последовательность пробелов выглядит так же, как один пробел), и при неразрывном пробеле ( ) строка не может быть разорвана.

Обновить:Я думаю, что то, что я действительно хочу, - это тег <pre>, который все еще может разбивать длинные строки (мне нужно отобразить исходный код).

Это было полезно?

Решение

Как насчет одного или нескольких em spaces ( )?Конечно, это будет зависеть от размера шрифта пользователя.Если это на самом деле не работает в вашем дизайне, рассмотрите en space ( ) .

Возможно, вы также захотите взглянуть на эта таблица из различных пробелов в Википедии.

Другие советы

На самом деле у меня есть точный ответ, который вы ищете.Я везде искал этот ответ, и ничто из того, что кто-либо предлагал, не работало идеально.Итак, я придумал решение, попробовал его и был поражен, что оно работает без каких-либо изъянов!

Гарроу на самом деле был прав (он просто не объяснил этого и не воспринял до конца).Решение заключается в том, чтобы вместо того, чтобы класть &nbsp; один, поставленный &nbsp;<wbr>.Просто выполните простой поиск, замените и добавьте <wbr> помечайте после каждого &nbsp;.Работает отлично!

Тот Самый <wbr> tag - это малоизвестный тег, поддерживаемый во всех основных браузерах, который сообщает браузеру, что он должен переводить здесь новую строку ТОЛЬКО в том случае, если это необходимо.

Обновить:Я нашел один браузер, в котором это работает не совсем правильно – IE 8!Они действительно уничтожили <wbr> отмечай!Я решил эту проблему, создав класс, который говорит:

.wbr:before { content: "\200B" }

и вместо замены &nbsp; с &nbsp;<wbr>, замените его следующим:

&nbsp;<wbr><span class='wbr'></span>

В PHP это выглядело бы следующим образом:

$text = str_replace(" ","&nbsp;<wbr><span class='wbr'></span>", $text);

Не забудьте также добавить класс.

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

Если это слишком запутанно, другое решение - заменить двойные пробелы на &nbsp; за ним следует обычный пробел.Это будет чередоваться &nbsp; и обычные пробелы, и работает в моих тестах.

В PHP это выглядело бы следующим образом:

$text = str_replace("  ","&nbsp; ", $text);

Надеюсь, это поможет!Я провел достаточно исследований по этому вопросу;Я подумал, что должен передать это дальше.

Разве пробел между двумя неразрывными пробелами не сработает?

   

Как насчет <wbr>?

Если вы не нацелен на IE (кроме 8, стандартный режим):

<span style="white-space: pre-wrap">   </span>

Для IE, <span style="width:3ex"></span> работает в режиме причуд, так что объедините их и...

<span style="width:3ex;white-space:pre-wrap">   </span>

который, кажется, работает везде, где я пробовал...за исключением стандартов IE7.О!

Как насчет двух &nbsp;за ним следует обычный пробел?Единственным недостатком этого (насколько я знаю) является то, что если разрыв строки естественным образом попадает на обычный пробел, у вас будет немного конечного пробела в предыдущей строке из-за неразрывных пробелов, но я не думаю, что это когда-либо повлияет на фактический внешний вид страницы.

Возможно, было бы лучше сделать шаг назад и спросить, что именно вы пытаетесь отобразить.Что означает это сверхширокое пространство?

это дает 100 пикселей слева от вашего текста пробелы пример

span style="поле слева: 100 пикселей;"

(n_n)

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top