Альтернатива переносу слов, которая устанавливает разрыв строки - PullRequest
Новая
       27

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

4 голосов
/ 25 октября 2011

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

Разрыв 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.

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

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

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

Ответы [ 3 ]

1 голос
/ 25 октября 2011

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

1 голос
/ 25 октября 2011

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

<!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">
Aaaa&nbsp;Bbbbbbbbbbbbbbbb
Ccccc&nbsp;Ddddddddddddddddd
</div>
</body>
</html>

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

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

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

0 голосов
/ 25 октября 2011

Может быть 

word-break: break-all;

Или 

white-space:normal;

Не проверено, просто вспоминая из старых времен:)

...