Есть ли способ обернуть слова в 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

14

white-space: pre-wrap

quirksmode.org/css/whitespace.html

— NVI
источник

4

мертвая ссылка. Пожалуйста, дайте более подробный ответ.

— JoshYates1980

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 пикселей

— Пол Захра