Перенос текста с помощью CSS - PullRequest
Новая
       27

Перенос текста с помощью CSS

5 голосов
/ 13 марта 2012

У меня гораздо более длинная строка чисел, сгенерированная случайным образом.Я показываю это в одном блоке div.Так как это намного длиннее одной строки.Это пишется в одну строку.

Например: 

String str="13,7,5,1,10,7,18,11,17,10,9,16,17,9,6,19,6,13,2,18,6,9,8,5,15,4,17,16,12,8,19,16,5,9,6,16,16,5,16,12,0,14,7,11,12,11,12,16,8,3,16,3,1,10,4,14,5,9,4,3,8,3,0,19,5,7,8,7,13,14,4,3,12,6,5,19,17,3,3,19,0,4,14,8,15,17,14,5,9,3,9,19,18,8,10,0,6,1,18,16,3,16,10,9,15,10,4,7,1,7,11,6,11,16,4,11,10,1,0,15,16,19,6,15,18,14,16,16,5,17,9,19,12,7,14,14,11,19,18,10,9,5,11,2,9,0,3,15,14,1,7,14,12,17,1,10,14,5,17,16,19,10,12,6,19,16,5,19,10,9,18,14,11,9,1,18,0,10,0,19,7,17,2,4,14,2,1,3,9,17,11,7,12,4,7,5,17,2,1,6,19,14,5,3,2,6";

<div id='row' style='width:100px;height:500px;'>

</div>

Я установил фиксированную ширину для блока div.Я хочу отобразить эту более длинную строку в несколько строк, а не в одной строке.

Я попробовал CSS 'text-wrap:normal'.Не работаетНа самом деле это свойство работает не во всех браузерах.

Ответы [ 5 ]

9 голосов
/ 13 марта 2012

используйте стиль word-wrap:break-word; css: 

<div id='row' style='word-wrap:break-word;'>
13,7,5,1,10,7,18,11,17,10,9,16,17,9,6,19,6,13,2,18,6,9,8,5,15,4,17,16,12,8,19,16,5,9,6,16,16,5,16,12,0,14,7,11,12,11,12,16,8,3,16,3,1,10,4,14,5,9,4,3,8,3,0,19,5,7,8,7,13,14,4,3,12,6,5,19,17,3,3,19,0,4,14,8,15,17,14,5,9,3,9,19,18,8,10,0,6,1,18,16,3,16,10,9,15,10,4,7,1,7,11,6,11,16,4,11,10,1,0,15,16,19,6,15,18,14,16,16,5,17,9,19,12,7,14,14,11,19,18,10,9,5,11,2,9,0,3,15,14,1,7,14,12,17,1,10,14,5,17,16,19,10,12,6,19,16,5,19,10,9,18,14,11,9,1,18,0,10,0,19,7,17,2,4,14,2,1,3,9,17,11,7,12,4,7,5,17,2,1,6,19,14,5,3,2,6
</div>​

LIVE Demo

Документы MDN :

Свойство word-wrap используется, чтобы указать, разрешено ли браузеру разбивать строки в словах, чтобы предотвратить переполнение, если неразрывная строка в противном случае слишком длинная.

О text-wrap, который вы пробовали: я не смог найти его в MDN !, но нашел это в w3school:

"Текст Свойство wrap не поддерживается ни в одном из основных браузеров. "

3 голосов
/ 13 марта 2012

Запись word-wrap:break-word в .row DIV css.Напишите так: 

#row{
  word-wrap:break-word;
}

Проверьте это http://jsfiddle.net/Rfc2j/1/

2 голосов
/ 13 марта 2012

Использовать word-wrap:break-word; свойство вместо text-wrap:normal

2 голосов
/ 13 марта 2012

Просто используйте word-wrap: break-word

пример скрипки: http://jsfiddle.net/Rfc2j/

1 голос
/ 13 марта 2012

Создайте пробел после каждой запятой.Такое представление является нормальным в человеческих языках, и оно также улучшает читаемость числовых последовательностей (хотя мне интересно, для чего оно генерируется - зачем это нужно?).Вы можете настроить интервал, установив word-spacing в отрицательное значение.

Если по какой-либо причине вам не нужны пробелы, генерируйте тег <wbr> после каждой запятой.Хмурится разработчиками стандартов (кроме HTML5), но практически повсеместно поддерживается браузерами.Однако, чтобы охватить некоторые современные странности (в IE и Opera), добавьте в свою таблицу стилей следующее: wbr:after { content: "\00200B"; }.

Обратите внимание, что если вы используете word-wrap:break-word, что поддерживается многими браузерами, но не всеми,браузеры могут свободно разбивать между цифрами и перед запятой, например, разбивая «42» на «4» в конце строки и «2» в начале следующей строки.

...