Я знаю, что в Internet Explorer есть стиль обертки, но я хотел бы знать, есть ли кросс-браузерный способ сделать это для текста в div.Есть ли способ словесных слов в div?
Предпочтительно CSS, но фрагменты JavaScript будут работать нормально.
Редактировать: Да, ссылаясь на длинные строки, приветствует людей!
Чтение оригинальный комментарий, резерфорд ищет кроссбраузерной способ обернуть неразрывную текст (выводится на его использование слова-обертывание для 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 находится в режиме quirks. – Jeremy
не работает ..... –
Я использую Firefox 24.6.0, а 'word-wrap: break-word' - это то, что на самом деле работало. – user545424
As david упоминает, DIVs do обернуть слова по умолчанию.
Если вы имеете в виду на самом деле длинные строки текста без пробелов, что я делаю, обработает строку на стороне сервера и вставить пустые пролеты:
thisIsAreallyLongStringThatIWantTo<span></span>BreakToFitInsideAGivenSpace
Это не точно, как Есть проблемы с шрифта проклейки и тому подобное. Параметр span работает, если контейнер имеет переменный размер. Если это контейнер с фиксированной шириной, вы можете просто пойти вперед и вставить разрывы строк.
не работает в IE9 и выше ... –
@TomHert, это действительно странно. Хотя, ну, IE. Он никогда не работает. Тем не менее, это было опубликовано 5 лет назад. В CSS3 теперь есть несколько лучших вариантов переноса слов, которые IE может поддерживать https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap –
Да, я знаю, меня просто потрясло простота этого решение, которое я должен был попробовать :) –
Вы можете попробовать указать ширину для div, будь то в пикселях, процентах или ems, и в этот момент div останется той шириной, и текст будет автоматически завернут, а затем в div.
Попробуйте установить ширину 10 пикселей и затем используйте слово длиннее 10px –
white-space: pre-wrap
мертвая ссылка.Пожалуйста, предоставьте более подробный ответ. – JoshYates1980
Решение 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 */
}
спасибо
Аарон Беннетт упомянул этот же ответ за два года до вас. то, что вы здесь сделали, не добавляет ценности. – AaA
Привет, как вы можете видеть, если вы читаете оба ответа снова, то, что я говорю, просто в том, что решение Aaron в порядке, но я получал ошибку в одной из строк, которые он написал, поэтому я просто изменил ее на решение, которое сработало для меня. Может быть, мне следовало бы прокомментировать его ответ, я знаю это, извините и спасибо – Hugo
Мне пришлось добавить это «белое пространство: -pre-wrap», и это сработало :) –
Большинство предыдущий ответ не работает для меня в Firefox 38.0.5. Это сделал ...
<div style='padding: 3px; width: 130px; word-break: break-all; word-wrap: break-word;'>
// Content goes here
</div>
Документация:
Перенос слов происходит по умолчанию. Вы имеете в виду обертывание, когда нет * отдельных слов? – Quentin