Есть ли способ обернуть слова в div?

173

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

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

редактировать: Да, имея в виду длинные строки, ура ребята!

css html word-wrap резерфорд
источник
7
Перенос слов происходит по умолчанию. Вы имеете в виду упаковку, когда нет отдельных слов?
Квентин

Ответы:

313

Читая исходный комментарий, Резерфорд ищет кросс-браузерный способ обтекания неразбитого текста (что вытекает из его использования переноса слов в 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)

Аарон Беннетт
источник
Старый пост, но он не отображает пробелы, когда IE находится в режиме причуд.
Джереми
2
Я использую Firefox 24.6.0, и word-wrap: break-wordэто то, что на самом деле работает.
user545424
3
Word-wrap: break-wordхотя созданный Microsoft в настоящее время является частью стандарта CSS 3 и в этом
вся суть
38

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

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

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

Пол Захра
источник
2
Спасибо! это единственный ответ, который сработал (слово-разрыв: разрыв-все; это то, что сработало для меня)
DaniCE
12

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

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

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

Хьюго
источник
1
Аарон Беннетт упомянул этот же ответ за 2 года до вас. То, что вы сделали здесь, не добавляет ценности.
AaA
6
Привет, как вы можете видеть, если вы прочитаете оба ответа снова, я говорю только о том, что решение Аарона в порядке, но я получил ошибку в одной из написанных им строк, поэтому я просто изменил ее на решение, которое работало для меня. Может быть, я должен иметь комментарий в его ответе, я знаю это, извините и спасибо
Хьюго
Я должен был добавить это "white-space: -pre-wrap", и это сработало :)
Рави
0

Как отмечает Дэвид, DIVs сделать обертывание слова по умолчанию.

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

thisIsAreallyLongStringThatIWantTo<span></span>BreakToFitInsideAGivenSpace

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

DA.
источник
@ TomHert, это действительно странно. Хотя, ну, IE. Это никогда не работает. Тем не менее, это было опубликовано 5 лет назад. В CSS3 теперь есть несколько улучшенных вариантов переноса слов, которые IE может использовать для developer.mozilla.org/en-US/docs/Web/CSS/word-wrap
DA.
Да, я знаю, я был просто шокирован простотой этого решения, которое мне пришлось испытать :)
Том Херт,
0

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

Slevin
источник
Попробуйте установить ширину 10 пикселей ... и затем используйте слово длиннее 10 пикселей
Пол Захра