Блог

Главная - Вопросы по программированию - Альтернатива переносу слов, который устанавливает разрыв строки

Альтернатива переносу слов, который устанавливает разрыв строки

#css #word-wrap #line-breaks

#css #перенос слов #разрывы строк

Вопрос:

Мне нужно обернуть длинную строку и хочу, чтобы strong прерывался при разрыве строки. Решение должно поддерживаться всеми браузерами.

Разрыв в b и d’ должен происходить следующим образом:

 Aaaa Bbbbbb
bbbbbbbbbb
Ccccc Dddddd
ddddddddddd

Тег word-wrap:break-word разрывает строку, но не заполняет строку до разрыва. Вот что происходит:

 Aaaa 
Bbbbbb
Bbbbbbbbbb
Ccccc 
Dddddd
ddddddddddd

Тег word-break: break-all делает именно то, что мне нужно, но не работает в Firefox и ie7 и ниже. Это работает только в Chrome, Safari и ie8.

Тег переноса текста делает именно то, что мне нужно, но пока не поддерживается ни одним браузером.

Есть предложения?

К вашему сведению: в настоящее время я управляю разрывом с помощью PHP.

Ответ №1:

Используя PHP, вставьте amp;#8203; , где вы хотите поместить разрыв строки. Это zero-width space character .

Ответ №2:

Возможное решение — заменить ваши пробелы неразрывным символом пробела: amp;nbsp; 

 <!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#container
{
  word-wrap: break-word;
  width: 100px;
  background-color: rgb(200, 200, 200);
  font: 14px monospace;
}
</style>
</head>
<body>
<div id="container">
Aaaaamp;nbsp;Bbbbbbbbbbbbbbbb
Cccccamp;nbsp;Ddddddddddddddddd
</div>
</body>
</html>

Довольно важное замечание:
Чтобы поведение, описанное вами, также работало в текстовой области:

 <textarea onkeyup="this.value = this.value.replace(/ /gi, 'u00A0');"></textarea>

Это заменит обычные пробелы неразрывными пробелами ( amp;nbsp; ).

Комментарии:

1. Спасибо, но я хотел бы избежать ручного решения, поскольку проблема повторяется, и изменения в макете страницы могут потребовать повторного ручного вмешательства. Я надеялся на альтернативу переносу текста, которая поддерживается всеми браузерами, или на обходной путь для word-break: break all в firefox и ie7. Или, возможно, способ заставить работу с переносом слов заполнить строку перед разрывом.

Ответ №3:

Может быть

 word-break: break-all;

Или

 white-space:normal;

Не тестировался, просто вспоминаю старые времена 🙂