Word wrap break word не работает
Указанные ниже свойства CSS определяют как переносить длинные слова:
В чём состоит различие одно свойства от другого
По умолчанию длинные слова не переносятся, если на то нет явных указаний с помощью дефиса, и начинаются с новой строки.
Для того, чтобы игнорировались черточки, сразу видимые глазу, вносим word-break: keep-all; .
Для того, чтобы браузер не обращал внимания и на мягкий дефис, вставляем hyphens: none; .
Если требуется перенос слов, то word-wrap: break-word; советую применять всегда, поскольку он понимается всеми браузерами. Он отличается от word-break: break-all; , которое является приоритетным, тем, что слова, которые не помещаются в блок, начинаются с новой строки и учитывается рекомендация мягкого дефиса.
При совместном использовании word-break: break-all; с hyphens: auto; , последнее игнорируется. hyphens: auto; расставляет любые дефисы по своему усмотрению. Но для того, чтобы оно работало, нужно обозначить свой язык, указав в div атрибут lang="ru" .
Не переносить слова на другую строку
Скажем, пункт меню или кнопка будут нехорошо выглядеть, если разъедутся на части. Поэтому надо запретить их разделение. Для чего все вышеуказанные свойства следует поставить в режим "по умолчанию" и добавить white-space: pre; или white-space: nowrap;. Нажмите на white-space: nowrap; и посмотрите на наш полигон.
Управлять переносом слов при hyphens: auto;
15 комментариев:
Анонимный Хорошая статья. Спасибо! NMitra Рада слышать! Анонимный здорово, спасибо Vit Simak white-space: pre-wrap; очень помогает, но только если он один указан или максимум с word-wrap: break-word; Анонимный ыва Людмила Горбач ваваы Максим Дунаевский Вот спасибо! Поправил свою CSS как тут написано — текст на кнопках стал нормально отображаться. NMitra Пожалуйста, рада помочь. Анонимный Спасибо, хорошая статья. Анонимный kjgtfrfghjkl Анонимный ‘); drop table forum; — lol NMitra Чего-чего? Дмитрий lang="ru" лучше писать в
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
word-wrap: break-word; NMitra Спасибо за дополнение! Dmitry Mycelin «’); drop table forum; — lol»
Это гугловская форма комментариев вообще-то. 🙂
Веб-пространство построено на контенте, а контент состоит из слов, и возможно из очень длинных. Всем « участникам » всемирной паутины рано или поздно приходится иметь дело с длинными словами:
Пример
Каждый день в сети я встречаю практически все виды дефектов отображения, связанных с длинными словами – « сломанные » макеты, обрезку слов и ситуацию, которая приведена на изображении выше.
Переносы
Первое решение для длинных слов — это применение переносов.
Пример
Поддержка браузерами: CSS -переносы поддерживаются во всех популярных браузерах, за исключением браузеров, реализованных на основе движка Blink ( Chrome, Opera, Android ). Здесь описаны все распространенные ошибки в Chrome . Я также протестировал Safari 5.1 под Windows , в котором переносы поддерживаются, но для моих тестовых слов все они добавлялись не в тех местах, в которых нужно.
Кроме этого, переносы во многом зависят от правил языка. Вам нужно определить атрибут lang в родительском элементе. Также нужно помнить, что другие языки, кроме английского , поддерживаются в браузерах на весьма низком уровне.
Вы также можете использовать библиотеку JavaScript , такую как Hyphenator.js , которая работает со многими языками и многими браузерами. Недостатком этого решения является то, что вам нужно будет загружать много дополнительных скриптов JavaScript , что может существенно снизить производительность.
word-break
Так как не все браузеры полностью поддерживают перенос слов, давайте попробуем это свойство CSS , которое указывает, следует ли разрывать строки внутри слов:
Пример
Поддержка браузерами: Свойство CSS word-break поддерживается во всех браузерах , за исключением Opera Mini и старых браузеров Opera на основе Presto .
Overflow-wrap
Еще одно возможное решение данной проблемы — использование word-wrap ( overflow-wrap ). Еще одно свойство, которое указывает, может ли браузер разбивать строки внутри слов:
Пример
Поддержка браузерами: Свойство CSS word-wrap поддерживается во всех браузерах . В некоторых из них для нормальной работы требуется указывать унаследованное имя word-wrap (а не overflow-wrap ).
Эллипсис
Еще один вариант для решения проблемы длинных слов — это усечение:
Пример
Поддержка браузерами: Text-overflow поддерживается во всех основных браузерах .
На первый взгляд кажется, что этот метод неплохо справляется с нашей проблемой, но он имеет ряд недостатков. Прежде всего, он будет обрезать любой текст, занимающий более одной строки, даже если вы использовали короткие слова, и они прекрасно разместились бы в нескольких строках. Кроме этого слова могут обрезаться так, что исходное слово будет приобретать другое значение.
Пожалуйста, не используйте text-overflow : ellipsis , потому что сокращать слова — это не работа CSS . Только, если вам действительно необходимо это сделать на стороне сервера, и только после полного сокращения слов.
Заключение
Я проверил все приведенные выше примеры и их сочетания в следующих браузерах: IE7 , IE8 , IE9 , IE10 , IE11 , Edge , Firefox 39 ( Windows, Linux, Mac ), Chrome 44 ( Windows, Linux, Mac ), Opera 30 ( Windows, Mac ) , Safari 8 ( Mac ), Safari 5.1 ( Windows ), Android-5 ( Nexus 6 ), Android 4.4 ( Nexus 5 ), Android 2.3 ( Galaxy S2 ), IOS 8.3 ( iPhone 6 ), IOS 7 ( iPhone 5S ), IOS 6 ( iPhone5 ), Opera Mini ( Android 5 ), Opera Classic ( Android 5 ), Opera Mobile ( Android 5 ) и Windows Phone 8.1 ( Lumia 930 ), используя реальные устройства и BrowserStack . По этой ссылке вы найдете список всех 26-браузеров, по этой ссылке — результаты их тестирования.
В интернете можно найти и такое решение :
Хотя это прекрасно работает в большинстве случаев, я выяснил, что в Firefox перенос не будет работать ( хотя он и поддерживается ) в сочетании с word-break . Как и word-break , это свойство не поддерживается, и не будет работать в Opera Mini .
В то же время overflow-wrap прекрасно поддерживается браузерами. Я протестировал следующее решение, используя overflow-wrap и перенос.
Окончательное решение
Этот код выводит переносы во всех браузерах, в которых они поддерживаются, и разрывы строк во всех остальных. Хотя я и протестировал это решение в 26 различных браузерах, но до сих пор не уверен, что оно будет работать в 100% случаев — если вы найдете какое-нибудь исключение, пожалуйста, дайте знать об этом в комментариях к статье.
Данная публикация представляет собой перевод статьи « Dealing with long words in CSS » , подготовленной дружной командой проекта Интернет-технологии.ру
Во всех браузерах слова переносятся, а в IE нет. Как правильно прописать?
1 ответ 1
Не работает перенос по двум причинам:
Во-первых, элемент должен иметь вариант отображения отличный от inline . Именно этот вариант задан для элемента a по умолчанию.
Во-вторых, для элемента должна быть указана ширина.
Пример исправления поведения:
Всё ещё ищете ответ? Посмотрите другие вопросы с метками css internet-explorer или задайте свой вопрос.
Похожие
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.1.17.35809
Я не могу заставить перенос слов работать с этим примером .
Я вспомнил, как читал, что нужно было указать макет (что я и сделал), но помимо этого я не уверен, что мне нужно сделать, чтобы это работало. Мне бы очень хотелось, чтобы это работало в Firefox. Спасибо.
РЕДАКТИРОВАТЬ: сбой в Chrome 19 и Firefox 12, он работает в IE8. Я пробовал doctype strict и transitional, ни один из них не работал.
Mozilla Firefox решение
К стилю вашего td .
Браузеры на основе Webkit ( Google Chrome , Safari , . )
К стилю вашего td .
Примечание : Имейте в виду, что на данный момент break-word не является частью стандартной спецификации webkit; поэтому вам может быть интересно использовать вместо этого break-all . Это альтернативное значение обеспечивает, несомненно, радикальное решение; однако он соответствует стандарту.
Opera решение
К стилю вашего td .
Предыдущий абзац аналогичным образом относится и к Opera.
word-wrap собственность работает с display:inline-block :
- word-break: normal|break-all|keep-all|break-word|initial|inherit;
Простой ответ на ваши сомнения: используйте выше и убедитесь, что white-space: nowrap нигде не используется.
ПРИМЕЧАНИЕ ДЛЯ ЛУЧШЕГО ПОНИМАНИЯ:
word-wrap / overflow-wrap используется для разрыва слов, которые переполняют свой контейнер
Свойство word-break разбивает все слова в конце строки, даже те, которые обычно переносятся на другую строку и не переполняют свой контейнер.
word-wrap является исторической и нестандартной собственностью. Он был переименован в overflow-wrap , но остается псевдонимом, браузеры должны поддерживать его в будущем. Многие браузеры (особенно старые) не поддерживают overflow-wrap и требуют word-wrap в качестве запасного варианта (который поддерживается всеми).
Если вы хотите угодить W3C, вам следует подумать о том, чтобы объединить и то, и другое в своем CSS. Если вы этого не сделаете, можно использовать только word-wrap .
I remembered reading that a layout had to be specified (which I did), but beyond that I'm not sure what I have to do to get this to work. I really would like this to work in Firefox. Thanks.
EDIT: Failed in Chrome 19 and Firefox 12, it works in IE8. I tried doctype strict and transitional, neither worked.
One thing the others don't seem to mention, you might have to put white-space back to normal if it's inherited.
10 Answers 10
Mozilla Firefox solution
to the style of your td .
Webkit based browsers (Google Chrome, Safari, . ) solution
to the style of your td .
Note: Mind that, as for now, break-word is not part of the standard specification for webkit; therefore, you might be interested in employing the break-all instead. This alternative value provides a undoubtedly drastic solution; however, it conforms to the standard.
Opera solution
to the style of your td .
The previous paragraph applies to Opera in a similar way.
This is not the same as word-wrap:break-word; With word-break:break-all "Word breaks may be inserted between any character"
Firefox: The inline block approach causes theWord-Break has nothing to do with inline-block .
Make sure you specify width and notice if there are any overriding attributes in parent nodes. Make sure there is not white-space: nowrap .
thank god! white-space: nowrap was the solution for me. how TH are there so many properties for doing the same thing?
Yes this answer is helpful. white-space:nowrap might be inherited and cause problems. It should be set to a different value. In my case I set it to white-space:break-spaces. You should also be able to set to the value to "unset" without any problems; assuming word-break or overflow-wrap is set
Use this code (taken from css-tricks) that will work on all browser
white-space: break-spaces; also works with display: flex; and a margin to contain your text inside a container and break where necessary. only solution that worked in my case. thank you Rubel!
This combination of properties helped for me:
to get the smart break (break-word) work well on different browsers, what worked for me was the following set of rules:
word-wrap property work's with display:inline-block :
- word-break: normal|break-all|keep-all|break-word|initial|inherit;
Simple Answer to your doubt is Use above and make sure white-space: nowrap nowhere used.
NOTE FOR BETTER UNDERSTANDING:
word-wrap / overflow-wrap is used to break words that overflow their container
word-break property breaks all words at the end of a line, even those that would normally wrap onto another line and wouldn’t overflow their container.
word-wrap is the historic and nonstandard property. It has been renamed to overflow-wrap but remains an alias, browsers must support in future. Many browsers (especially the old ones) don’t support overflow-wrap and require word-wrap as a fallback (which is supported by all).
If you want to please the W3C you should consider associate both in your CSS. If you don’t, using word-wrap alone is just fine.
почему свойство word wrap не работает должным образом в приведенном ниже примере?
что я могу сделать, чтобы убедиться, что часть слова "consectetur" вписывается в первую строку? Я хочу, чтобы максимальное количество символов соответствовало каждой строке.
использовать word-break: break-all;
Если word-wrap: break-all не работает, попробуйте добавить это:
работы для меня .класс btn в Bootstrap 3
он не переносится должным образом, потому что браузеры не применяют автоматические переносы (что было бы способом вызвать правильный wrapping) по умолчанию. Вам нужно использовать перенос CSS или перенос на основе JavaScipt. Настройка word-wrap:break-word , а также word-break: break-all по определению разрывы слова (разбивает их на куски s в arbit rary poin ts), вместо правильной упаковки.
поскольку CSS word-wrap не работает во всех браузерах, используйте JavaScript вместо этого! Это должно дать тот же результат.
функция ниже требует JQuery, и она будет запускаться каждый раз, когда окно повторно размер.
функция проверяет, имеет ли элемент больше ширины, чем его родитель, и если он имеет, он разбивает все вместо слов только. Мы же не хотим, чтобы дети выросли больше, чем родители, верно?
если он перейдет в else, он изменится на Word-break, а затем проверьте, должен ли он измениться обратно, вот почему так много кода.. :'/
Я надеюсь, что это работает для вас!
это полезно для упаковки текста в одну строку:
хорошо, поэтому я знаю, что это старый вопрос, но я серьезно думаю, что может быть какое-то полезное разъяснение того, когда использовать какое свойство. Глядя на существующие ответы, я чувствую, что они предлагают решения без объяснений, поэтому вот моя попытка помочь с этим. Для контекста по умолчанию контейнер не будет пытаться разбить одно длинное слово, потому что он хочет сохранить слово в его исходной форме.
С учетом сказанного, 3 основных способа расстаться слова там is overflow-wrap , word-break и hypens . Я не буду слишком глубоко погружаться в hypens.
Итак, во-первых. я вижу word-wrap используется в вопросе, но чтение документации, которая устарела, и некоторые браузеры решили просто псевдоним его overflow-wrap . Наверное, лучше не использовать это.
различие между двумя свойствами довольно ясно в документации, но для ясности, overflow-wrap действительно имеет только два возможных значения и обнаружить, если слово было переполнено. Если это так, по умолчанию он перемещает все слово в следующую строку. Если break-word установлен, он будет разбивать слово только в том случае, если все слово не может быть помещено на эту строку.
вы можете увидеть pneumonoul. длинное слово ломается именно там, где ему нужно, на следующей строке после попытки отделить длинное слово.
сейчас в контраст, мы имеем word-break . Это имеет более зернистые свойства и на самом деле также имеет . Это синоним вышеуказанного фрагмента, поэтому, когда использовать тот или иной, я думаю, довольно тривиально.
, word-break предлагает break-all значение, которое будет нарушать слово, когда это возможно, чтобы соответствовать слову, где оно изначально предназначалось. Он не пытается выяснить, нужно ли ему слово, чтобы быть на новой линии или нет-он просто толкает разрыв линии, где он переполняется. Этот самое большое отличие здесь от вышеизложенного заключается в том, что длинное слово, которое мы используем, все еще находится наверху.
и, наконец, для hyphens имеют свой собственный особый способ разбивания слов. Для получения дополнительной информации взгляните на документация. Также стоит отметить, что разные языки имеют разные способы разбиения слов, но, к счастью, hyphens свойство крючки в lang атрибут и понимает, что делать.
другой вариант, который предложили люди, использует white-space свойство, которое пытается разбить текст через помещения. В Примере, который я использовал, это не помогает нашей ситуации, потому что само слово длиннее контейнера. Я думаю, что важно отметить об этом свойстве CSS, что это не пытается разбить слова внутри себя и скорее пытается сделать это через пробелы, когда это уместно.
Веб-пространство построено на контенте, а контент состоит из слов, и возможно из очень длинных. Всем « участникам » всемирной паутины рано или поздно приходится иметь дело с длинными словами:
Каждый день в сети я встречаю практически все виды дефектов отображения, связанных с длинными словами – « сломанные » макеты, обрезку слов и ситуацию, которая приведена на изображении выше.
Переносы
Первое решение для длинных слов - это применение переносов.
Поддержка браузерами: CSS -переносы поддерживаются во всех популярных браузерах, за исключением браузеров, реализованных на основе движка Blink ( Chrome, Opera, Android ). Здесь описаны все распространенные ошибки в Chrome . Я также протестировал Safari 5.1 под Windows , в котором переносы поддерживаются, но для моих тестовых слов все они добавлялись не в тех местах, в которых нужно.
Кроме этого, переносы во многом зависят от правил языка. Вам нужно определить атрибут lang в родительском элементе. Также нужно помнить, что другие языки, кроме английского , поддерживаются в браузерах на весьма низком уровне.
Вы также можете использовать библиотеку JavaScript , такую как Hyphenator.js , которая работает со многими языками и многими браузерами. Недостатком этого решения является то, что вам нужно будет загружать много дополнительных скриптов JavaScript , что может существенно снизить производительность.
word-break
Так как не все браузеры полностью поддерживают перенос слов, давайте попробуем это свойство CSS , которое указывает, следует ли разрывать строки внутри слов:
Поддержка браузерами: Свойство CSS word-break поддерживается во всех браузерах , за исключением Opera Mini и старых браузеров Opera на основе Presto .
Overflow-wrap
Еще одно возможное решение данной проблемы - использование word-wrap ( overflow-wrap ). Еще одно свойство, которое указывает, может ли браузер разбивать строки внутри слов:
Поддержка браузерами: Свойство CSS word-wrap поддерживается во всех браузерах . В некоторых из них для нормальной работы требуется указывать унаследованное имя word-wrap (а не overflow-wrap ).
Эллипсис
Еще один вариант для решения проблемы длинных слов - это усечение:
Поддержка браузерами: Text-overflow поддерживается во всех основных браузерах .
На первый взгляд кажется, что этот метод неплохо справляется с нашей проблемой, но он имеет ряд недостатков. Прежде всего, он будет обрезать любой текст, занимающий более одной строки, даже если вы использовали короткие слова, и они прекрасно разместились бы в нескольких строках. Кроме этого слова могут обрезаться так, что исходное слово будет приобретать другое значение.
Пожалуйста, не используйте text-overflow : ellipsis , потому что сокращать слова - это не работа CSS . Только, если вам действительно необходимо это сделать на стороне сервера, и только после полного сокращения слов.
Заключение
Я проверил все приведенные выше примеры и их сочетания в следующих браузерах: IE7 , IE8 , IE9 , IE10 , IE11 , Edge , Firefox 39 ( Windows, Linux, Mac ), Chrome 44 ( Windows, Linux, Mac ), Opera 30 ( Windows, Mac ) , Safari 8 ( Mac ), Safari 5.1 ( Windows ), Android-5 ( Nexus 6 ), Android 4.4 ( Nexus 5 ), Android 2.3 ( Galaxy S2 ), IOS 8.3 ( iPhone 6 ), IOS 7 ( iPhone 5S ), IOS 6 ( iPhone5 ), Opera Mini ( Android 5 ), Opera Classic ( Android 5 ), Opera Mobile ( Android 5 ) и Windows Phone 8.1 ( Lumia 930 ), используя реальные устройства и BrowserStack . По этой ссылке вы найдете список всех 26-браузеров, по этой ссылке - результаты их тестирования.
В интернете можно найти и такое решение :
Хотя это прекрасно работает в большинстве случаев, я выяснил, что в Firefox перенос не будет работать ( хотя он и поддерживается ) в сочетании с word-break . Как и word-break , это свойство не поддерживается, и не будет работать в Opera Mini .
В то же время overflow-wrap прекрасно поддерживается браузерами. Я протестировал следующее решение, используя overflow-wrap и перенос.
Окончательное решение
Этот код выводит переносы во всех браузерах, в которых они поддерживаются, и разрывы строк во всех остальных. Хотя я и протестировал это решение в 26 различных браузерах, но до сих пор не уверен, что оно будет работать в 100% случаев - если вы найдете какое-нибудь исключение, пожалуйста, дайте знать об этом в комментариях к статье.
Читайте также: