Есть ли способ обернуть длинные слова в div? - PullRequest
Новая
       34

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

163 голосов
/ 28 октября 2009

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

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

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

Ответы [ 6 ]

304 голосов
/ 28 октября 2009

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

31 голосов
/ 09 июня 2015

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

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

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

14 голосов
/ 28 октября 2009
11 голосов
/ 30 апреля 2014

Решение Аарона Беннета отлично работает для меня, но мне пришлось удалить эту строку из его кода -> 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 */
}

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

0 голосов
/ 28 октября 2009

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

0 голосов
/ 28 октября 2009

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

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

thisIsAreallyLongStringThatIWantTo<span></span>BreakToFitInsideAGivenSpace

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

...