Есть ли способ сложить слова длинные слова в div?

Я знаю, что в Internet Explorer есть стиль обертывания слов, но я хотел бы знать, есть ли кросс-браузерный способ сделать это для текста в div.

Предпочтительно CSS, но фрагменты JavaScript будут работать нормально.

edit: Да, ссылаясь на длинные строки, приветствую людей!

Ответ 1

Считая исходный комментарий, rutherford ищет кросс-браузер способ обернуть несломанный текст (предполагается, что он использует перенос слов для IE, предназначенный для разрыва неразрывные строки).

/* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */
.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

Я использовал этот класс немного и работает как шарм. (примечание: я тестировал только в FireFox и IE)

Ответ 2

Большая часть предыдущего ответа не работала для меня в Firefox 38.0.5. Это было...

<div style='padding: 3px; width: 130px; word-break: break-all; word-wrap: break-word;'>
    // Content goes here
</div>

Документация:

Ответ 3

white-space: pre-wrap

quirksmode.org/css/whitespace.html

Ответ 4

Решение Aaron Bennet отлично работает для меня, но мне пришлось удалить эту строку из своего кода → white-space: -pre-wrap; beacause, поскольку он выдавал ошибку, поэтому окончательный рабочий код следующий:

.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

Большое спасибо

Ответ 5

Как упоминает Дэвид, DIV по умолчанию переносят слова.

Если вы имеете в виду действительно длинные строки текста без пробелов, то я делаю процесс на стороне сервера и вставляю пустые промежутки:

thisIsAreallyLongStringThatIWantTo<span></span>BreakToFitInsideAGivenSpace

Это не точно, поскольку есть проблемы с размером шрифта и т.д. Параметр span работает, если контейнер имеет переменный размер. Если это контейнер с фиксированной шириной, вы можете просто пойти вперед и вставить разрывы строк.

Ответ 6

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