word-wrap в CSS


Содержание

word-wrap

Свойство CSS word-wrap позволяет переносить (разбивать) слова на несколько строк, если они не помещаются в ширину строки элемента. Это бывает необходимо в тех случаях, когда в тексте попадаются длинные слова, а ширина элемента сравнительно небольшая, что может быть актуально, например, для небольших чатов.

Для создания переносов в длинных словах также можно использовать спецсимвол HTML — «мягкий» дефис (­).

Тип свойства

Применяется: ко всем элементам.

Значения

Значением свойства word-wrap является одно из ключевых слов разрешающих или запрещающих перенос слов в тексте.

  • normal — происходит перенос только между словами в местах пробелов, как обычно.
  • break-word — браузеру разрешается разбивать слова на несколько строк, если целиком в строку они не помещаются.

Процентная запись: не существует.

Значение по умолчанию: normal.

Синтаксис

Пример CSS: использование word-wrap

Результат. Использование свойства CSS word-wrap.

Свойство CSS word-wrap

Свойство CSS word-wrap отвечает за перенос слов на новую строку, если оно не умещается. Поддерживается только в версии CSS3. Во всех современных браузер корректно работает.

Синтаксис CSS word-wrap

  • normal — значение по умолчанию. Если слово не умещается в блок (контейнер), то оно будет вынесено за пределы контейнера
  • break-word — включает перенос слов, т.е. не будет той ситуации, когда слово вылезет за пределеы отведенной области
  • inherit — принять значение предка (родителя)

Примеры перенос слов в html

В первом примере перенос слов будет включен, а во втором выключен.

Вот как это выглядит на странице:

В целом польза от свойства word-wrap есть. Например, в комментариях некоторые пользователи могут размещать длинные слова. Итогом такого баловства может быть то, что весь дизайн поедет.

CSS Word Wrapping

Contents

Making CSS wrap text

If a container contains a word that is too long to fit between the edges, you can use the CSS word-wrap property to allow breaking words and wrapping them in the next line:

It may seem similar to word-break, but there is a clear difference: word-wrap is used to break a word that is too long to fit, and word-break breaks the last word in a too long line.

White-space, word-wrap и их друзья :: Хранитель заметок

White-space, word-wrap и их друзья

Для разного контента нужны разные правила форматирования: фрагменты кода должны сохранять все переносы строк и табуляцию; текст, написанный случайным посетителем сайта, не должен «порвать» вёрстку и т.п. Форматирование можно контролировать с помощью CSS.

Свойство white-space

CSS свойство white-space описывает то, как будут обрабатываться пробельные символы внутри элемента.

Новая строка Пробелы и табуляция Перенос текста
normal схлопывается схлопываются есть
nowrap схлопывается схлопываются нет
pre остаётся остаются нет
pre-wrap остаётся остаются есть
pre-line остаётся схлопываются есть

Значения pre-wrap и pre-line доступны во всех современных версиях браузеров и в IE начиная с версии 8.0.

Свойство word-wrap

Изначально это свойство появилось в линейке браузеров IE и только потом перекочевало в другие браузеры, так и не появившись в спецификации CSS2. В CSS3 аналогичное поведение закреплено за свойством overflow-wrap, а word-wrap останется в качестве псевдонима.

Это свойство может принимать значения:

Переносы строк будут формироваться только в дозволенных позициях.

Слово будет разрываться, если в пределах строки нет подходящей позиции для переноса строки.

Это свойство можно использовать для переноса строк в теге

Свойство word-break

Когда нужно применить «грубую силу» и переносить любую строку в любом месте (я даже не представляю себе где это может потребоваться), то в дело вступает word-break.

Это свойство имеет больший приоритет, чем word-wrap ( overflow-wrap) и будет разрывать слова даже там, где это особо и не требуется.

В браузерах на Webkit это свойство имеет ещё одно нестандартное значение – break-word, которое по своему действию аналогично word-wrap.

Свойство hyphens

С нетерпением ждём, когда браузеры начнут делать автоматическую расстановку переносов в словах.

Основным препятствием на пути внедрения этой технологии стоит то, что браузеру требуется описание правил переноса слов для различных языков. На сегодняшний день только Safari и Firefox могут похвастаться этим.

Основные варианты решения проблемы переноса слов в CSS

Труднопереносимыми бывают не только люди, но и слова. К примеру, химическое соединение метилпропенилендигидроксициннаменилакрилическая кислота очень похожа на некоторых людей с « подвывертом »! Не знаем, как справляться с такими трудными личностями, но с переносом слов CSS точно поможет:

Зачем переносить «непереносимое»

В большинстве случаев при отображении текстового содержимого веб-страниц в браузере перенос слов не применяется. Если слово не вмещается целиком в область экрана, то по умолчанию оно полностью « переезжает » на следующую строчку.

Частичный перенос применяется лишь к длинным и сложным словам, состоящим из нескольких терминов и разделенных дефисом. Вот тут и возникают проблемы отображения этих слов на разных по диагонали экранах и в разных браузерах. При этом точно предугадать, как длинное слово будет « выглядеть » на клиентской стороне трудно, поэтому задавать переносы « вручную » бессмысленно:

Решаем проблему переноса слов с помощью HTML

Перед тем, как рассмотреть перенос длинных слов в CSS , изучим возможности решения этой проблемы с помощью языка гипертекста.
Для этого в HTML имеется несколько вариантов:

  • Использование символа мягкого разрыва ­ — позволяет задать место разрыва сложного слова. При изменении размеров окна браузера на следующую строку переносится только часть длинного слова, стоящая после &shy , а после первой половины выводится знак переноса, похожий на дефис:
  • Использование тега — элемент появился в HTML 5 . Он также служит для указания браузеру места для разрыва сложного или длинного слова. Но в отличие от предыдущего спецсимвола этот тег не выводит в месте « разлома » знак переноса, что может негативно сказаться на читаемости всего текста:

Перенос слов средствами CSS

Перед тем, как запретить перенос слов в CSS , давайте рассмотрим несколько свойств, способных разрешить основную проблему:

  1. word-wrap – описывает, как производить перенос слов, которые по длине не помещаются в установленные размеры контейнера. Сразу стоит предупредить, что с валидацией этого свойства возникают проблемы, и с реализацией его поддержки в CSS консорциум W3C еще не определился. Поэтому специализированные валидаторы при наличии word-wrap в коде будут выдавать ошибку:

Тем не менее, это свойство «воспринимается» всеми современными браузерами и является эффективным решением проблемы переноса длинных слов. word-wrap принимает следующие значения:

  • normal – слова не переносятся;
  • break-word – автоматический перенос слов;
  • inherit – наследование значения родителя.

Пример, иллюстрирующий применение этого свойства:

В новой спецификации CSS свойство word-wrap было переименовано в overflow-wrap . Оба свойства принимают одинаковые значения. Но поддержка overflow-wrap пока реализована слабо, поэтому лучше использовать старую версию свойства:

Илон Маск рекомендует:  Что такое код hw_stat

Как видно на расположенном выше скриншоте, новое свойство поддерживается Google Chrome , но не поддерживается в IE . Поэтому overflow-wrap лучше не использовать для переноса слов в CSS .

  1. word-break – устанавливает правила переноса строк внутри контейнера, если они не помещаются в него по ширине. Это новое свойство, и его поддержка была реализована в CSS3 . Оно является валидным, но предназначено для работы со строками, поэтому перенос слов может производиться грамматически неправильно.

Свойство принимает три значения:

  • normal – используются правила переноса, установленные по умолчанию;
  • word-break – перенос строк осуществляется автоматически, чтобы слово поместилось в установленные по ширине размеры контейнера;
  • keep-all – отключает автоматический перенос слов в китайском, японском и корейском. Для остальных языков действие значения аналогично normal.
  1. hyphens – новое свойство, которое появилось с выходом CSS3 . Оно устанавливает, как браузер будет осуществлять перенос слов в выводимом тексте. Свойство принимает несколько значений:
  • none – отключает перенос слов в CSS ;
  • manual ( значение по умолчанию ) – слова переносятся в тех участках текстового блока, где это задано с помощью тега или мягкого переноса (­) ;
  • auto – браузер автоматически переносит слова на основе своих настроек.

должен присутствовать атрибут lang со значением «ru» (lang=»ru»).

Свойство поддерживается последними версиями IE , Opera и Firefox . Для каждого из них прописывается своя строчка CSS . Hyphens не поддерживается Google Chrome . Пример:

Запрет переноса слов

Иногда нужно сделать так, чтобы строка отображалась полностью без разрыва. Запрет переноса слов в css можно реализовать несколькими способами:

  • С помощью неразрывного пробела &nbsp , который устанавливается в местах переноса строки или слов;
  • Задав свойству white-space значение « nowrap » ( white-space: nowrap ).

Теперь вы сможете переносить с помощью CSS даже самые длинные слова. Но вот с проблемой труднопереносимых людей вам придется разбираться самостоятельно. Попробуйте воздействовать на них методами CSS – может и получиться, хотя мы сами не проверяли.

Свойства CSS для управления веб-типографикой

31 Августа 2015

Преимуществом веб-типографики является то, что она базируется на знаниях, накопленных за столетия развития традиционной печатной типографики. По той же причине веб-типографика должна следовать стандартам лучших практик и передового опыта.

Однако, веб это пространство коммуникации со своими особенностями. Настолько, что плавный переход от печати к веб-типографике становится вызовом. Джейсон Санта Мария в своей книге о веб-типографике пишет:

Печатные книги это статический формат. От первого дизайнерского макета книга без изменений проходит свой путь к вам через типографию, склад и книжную полку. В точно таком же виде, как было задумано.

В вебе один и тот же сайт может выглядеть различно в зависимости от многих факторов — различий устройств, разрешения их экранов, личных настроек браузеров и прочего. Как далее пишет Джейсон, некоторые из этих факторов…

Могут дать впечатление, что шрифт слишком мелкий, другие выносят часть содержимого за пределы экрана, а третьи могут полностью испортить просмотр страницы.

Но также известно, что “веб это лучшее место для текста”. Текст в Интернете можно “искать, копировать, переводить, передавать в виде ссылки, распечатывать; текст в вебе удобен и доступен”.

Гибкость веба не означает отказ от контроля. Наоборот, как веб-дизайнеры мы ожидаем возможности делать осознанный выбор во всем, что составляет нашу работу и текст не исключение. Это и то, как располагается текст, его размер, шрифт и все, что позволяет донести основную идею сайта.

Главный инструмент для манипуляции видом текста в вебе это CSS.

Свойства CSS, рассматриваемые в этой статье, вы можете найти в модуле спецификации CSS текста.

Этот модуль описывает верстку CSS, то есть свойства CSS, управляющие переводом источника текста в форматированный и разделенный на строки текст.

Другими словами, модуль CSS текста это все, что касается вывода символов и слов в браузере, отступов, выравнивания, переносов и прочего.

Что считать базовой единицей текста или слова, где можно разбивать слова и прочие правила, зависит от языка сайта. Поэтому очень важно задавать данные об используемом языке в HTML-документе (обычно это атрибут lang в элементе html ).

В этой статье я не буду обсуждать следующие вещи:

  • шрифты, т.е. визуальное представление символов и их свойства;
  • свойства CSS по декорированию текста, такие как подчеркивание, тени текста или акцентирование.

Если вы любопытны, вы найдете последнюю документацию о шрифтах и декорировании текста в модуле CSS шрифты третьего уровня и в модуле декорирования текста CSS третьего уровня.

Управление регистром букв: text-transform

Иногда возникает необходимость вывести слова или первые символы слов с заглавной буквы. В CSS для управления регистром буквы есть свойство text-transform .

Дефолтное значение text-transform равно none , то есть по умолчанию регистр букв не изменяется.

Значение capitalize

Если вы хотите сделать заглавной первую букву каждого слова, оставив все остальные в первоначальном виде, то этого можно достичь задав значение capitalize .

Отметьте, что capitalize не следует традиционным правилам — оно делает заглавными первые буквы всех слов, включая предлоги. И если вы хотите следовать нормам английского языка, вам придется делать это вручную.

Значение uppercase

Если ваша цель — сделать все буквы заглавными, то подходящим значением будет uppercase :

Значение lowercase

Это значение наоборот делает все символы строчными. Естественно, оно не оказывает никакого воздействия на уже имеющиеся строчные буквы.

Значение full-width

Это значение появилось в спецификации недавно. Это значение ограничивает символ внутри квадрата, аналогично иероглифам. И применение этого свойство облегчает выравнивание латинских символов с идеографическими.

Не у всех символов есть соответствующая форма, и, значит, не на все символы будет влиять это значение:

Это свойство на данный момент поддерживается только в Firefox.

Дополнительная информация

Браузеры отлично поддерживают свойство text-transform , у всех основных браузеров с ним нет проблем.

Единственное исключение это значение full-width , которое работает пока только в Firefox. И такая непопулярность вполне может повлечь исключение этого значения из спецификаций.

Также есть небольшое отличие в обработке capitalize у Firefox и остальных браузеров.

Вот, например, Firefox:

Заметьте, что первая буква после дефиса не капитализируется. А вот тот же самый пример в Chrome:

В Chrome не делается исключений для первых букв после дефисов — они переводятся в заглавный регистр также как остальные. И это является дефолтным поведением для всех браузеров, кроме упомянутого выше Firefox.

И, наконец, не забывайте о каскадировании. Задание свойства text-transform для элемента-контейнера будет унаследовано всеми его потомками. Чтобы избежать неожиданных результатов, задавайте дочерним элементам text-transform в значение none .

Обработка пробелов: white-space

Когда вы нажимаете клавишу Tab , пробел или форсированно обрываете строку (с клавишей ENTER или тегом
), вы создаете пробелы в своем документе.

По умолчанию браузеры объединяют все последовательности пробелов в один, удаляют обрывы строки и заставляют строки занимать ширину контейнера. Это удобно потому что позволяет делать отступы и разделять фрагменты текста, сохраняя исходник документа читаемым и поддерживаемым, не заботясь о его отображении в браузере.

Однако, что делать, если у нас другая цель? Предположим, вы хотите сохранить все пробелы, которые вы создали в HTML-документе. Или вы хотите, чтобы фрагмент текста выводился как сниппет кода, со всеми отступами. Или же вы хотите вывести текст в одну линию, без переносов.

В тех случаях, когда вам нужно изменить дефолтное поведение браузера, свойство white-space предлагает несколько интересных вариантов.

Ключевое слово normal идентично дефолтному поведению — все лишние пробелы схлопываются в один, строка переводится после достижения края контейнера.

Значение pre

Ключевое слово pre позволяет вам вывести текст с сохранением всех пробелов и всех форсированных переводов строки в исходнике. И при превышении пределов контейнера строка не будет обрываться.

Если вы используете табы, то вы можете управлять их размером в пробелах с помощью свойства tab-size . Оно принимает значение в виде целого числа.

Илон Маск рекомендует:  Сжатие данных в целях экономии места и ускорения работы oracle

Свойство tab-size поддерживают все современные браузеры, кроме браузеров от Microsoft (и даже Edge, увы), но если вы уверены, что вам это надо, используйте полифилл.

Значение pre-wrap

Это значение позволяет сохранить все множественные пробелы на месте, но если строка не вмещается в контейнер, она автоматически переносится.

Ключевое слово pre-wrap позволяет вам достигнуть желаемого результата.

Отметьте, как каждая строка, выведенная в браузере, повторяет все переводы строки из исходника при наличии места в контейнере.

Однако, если вы уменьшите ширину браузера, вы заметите, что все строки ограничены шириной контейнера.

Значение pre-line

И, наконец, еще одно интересное значение свойства white-space — pre-line . Оно действует как дефолтное в части схлопывания пробелов в один и ограничения строки размером контейнера. Однако оно отрабатывает все форсированные переводы строки.

Значение nowrap

nowrap это, возможно, самое известное значение для white-space . Сталкивались вы с необходимостью задать какому-либо элементу дизайна неразрывность вне зависимости от ширины контейнера? Это делается с помощью white-space: nowrap; .

Луис Лазарис указывает на следующий случай использования этого значения.

На примере выше ссылка обозначена символом » и переносить его на следующую линию не желательно.

В этом и подобных случаях поможет значение nowrap .

Другой интересный случай использования nowrap описан Сарой Суайдан в справочнике по CSS от Codrops. Сара указывает, что это значение можно применять к любому строчному контенту, включая изображения.

Значение nowrap можно использовать для создания горизонтального списка изображений в скроллящемся элементе (карусели), обеспечивая их совместный вывод внутри контейнера.

Я проиллюстрирую это предложение, создав базовую карусель на jQuery с использованием white-space: nowrap . Вот демо:

Управляем переносом строки с разбитием слов

Иногда дизайн портиться из-за отдельных очень длинных слов, не переносящихся на следующую строку и переполняющих контейнер. Это может быть длинный URL или комментарий с зажатой клавишей.

Для таких случаев у нас есть специальные свойства CSS.

Свойство word-wrap/overflow-wrap

Свойство overflow-wrap (раннее известное как word-wrap и до сих пор поддерживаемое во всех основных браузерах) работает, если свойство white-space допускает перенос в соответствии с размером строки. Возможные значения — normal и break-word .

Со значением normal слова разбиваются на всех традиционных маркерах — пробелы, дефисы и т.д.

Значение break-word позволяет разбить длинные слова, если иначе строка будет превышать доступный размер.

На картинке ниже изображен пример длинного слова, выходящего за пределы контейнера:

Теперь зададим этому элементу свойство overflow-wrap (и свойство word-wrap для совместимости) в значение break-word :

Теперь сверхдлинное слово разбито на несколько строк, заполняющих всю ширину контейнера.

Свойство hyphens

Разбитие длинных слов это, конечно, хорошо. Однако, полученный текст может смутить читателей. Лучше будет, если разбитие слова будет сопровождаться установкой дефиса. Таким образом, читателям сразу становится ясно, что это одно слово, разделенное между строками. Этого можно достичь используя свойство hyphens , его можно сочетать с word-wrap: break-word .

Конкретно это значит, что значение auto свойства hyphens позволяет вывести дефис на месте разбития слова, если язык документа позволяет это делать в имеющемся источнике HTML. Чтобы это сработало, не забудьте задать правильный атрибут lang своему документу:

Вы также можете отключить вывод дефисов, задав hyphens значение none :

Также у вас есть возможность вывести дефисы на разрывах строки там, где вы поставили их в разметке. Это делается с помощью значения manual :

Основные браузеры поддерживают свойство hyphens с помощью вендорных префиксов, но в реализации есть некоторые различия. Последние на момент написания статьи версии Chrome (44) и Opera (30) не поддерживали значение auto .

Управляем пространством между словами и буквами

Читаемость фрагмент текста зачастую зависит от нескольких факторов. В некоторых случаях, уменьшение или увеличение пространства между словами или буквами, то есть трекинг существенно улучшает читаемость.

В CSS есть свойства word-spacing и letter-spacing для управления расстоянием между словами и буквами соответственно.

Свойство word-spacing

Это свойство может принимать следующие значения:

  • normal
  • (задание непосредственно числового значения в абсолютных единицах)
  • percentage (задание значения в процентах)

normal выводит заданное по умолчанию расстояние между буквами. Это расстояние зависит от используемого шрифта и браузера.

Числовое значение добавляет указанный промежуток к дефолтному ( вычитает, если задано отрицательное значение):

Значение в процентах работает также как и числовое. На данный момент оно не поддерживается браузерами и, скорее всего, будет удалено из будущих черновиков спецификации.

Свойство letter-spacing

Свойство letter-spacing принимает два вида значений: normal или числовое значение с единицами измерения.

Свойство normal сбрасывает любое раннее установленное значение letter-spacing на дефолтное. Например, если вы задали родительскому элементу letter-spacing в 1em , вы можете отменить это для дочерних с помощью normal .

Числовое значение задается в единицах исчисления, например в em или в пикселях, вы можете увеличить расстояние дефолтное расстояние или уменьшить задав отрицательное значение.

Дополнение

word-spacing применимо не только к словам — его можно использовать с любым строчным или строчно-блочным содержимым.

Также вы можете анимировать word-spacing и letter-spacing . Однако в CSS-переходах значение normal в letter-spacing не работает в Firefox (39), просто замените значение на 0em .

Вот небольшое демо с анимацией текста, использующей word-spacing и letter-spacing :

Опции CSS для выравнивания текста: text-align

Свойство text-align используется в вебе уже давно. Оно контролирует выравнивание строчного контента (текста или изображений) внутри блочного контейнера. Ключевые слова left и right выравнивают содержимое по соответствующим краям контейнера. center — выравнивает по центру, а justify делает все строки одинаковой длины (кроме последней в абзаце).

В спецификации появилась пара новых значений, полезных для сайтов,использующих написание справа налево (RTL): start и end .

Для обычных языков (LTR) они соответствуют left и right соответственно. А для языков (RTL) start соответствует right , а end — left .

Применение text-align: match-parent к дочернему элементу вынудит его унаследовать тоже выравнивание, что и у родительского элемента. И значения start и end в таком случае будут расчитаны исходя из направления языка родительского элемента.

Свойство text-align-last

Это свойство отвечает за выравнивание последней строки абзаца текста. Оно принимает те же ключевые значения, что и text-align , за исключением того, что дефолтным является значение auto . auto выравнивает последнюю строку в соответствии со значением text-align , если text-align не задано используется значение start .

На момент написания, это свойство плохо поддерживается браузерами. Поэтому пока стоит избегать его использования или делать это с осторожностью.

Отступы в тексте: text-indent

Отступы в тексте обычно делаются в первой строке параграфа, хотя и не являются распространенной практикой на веб-сайтах. Вместо этого обычно помещается пустая строка, разделяющая параграфы.

Тем не менее, иногда отступ в первой строке иногда используется, например, для имитации классических книжных дизайнов.

Если вы хотите использовать эту технику в своем дизайне, в CSS есть свойство text-indent . Рассмотрим его возможные значения.

Числовое значение можно задать в пикселях, em’aх и других поддерживаемых единицах:

В том числе и в процентах от ширины контейнера:

Значение each-line добавляет отступ не только первой строке, но и любой строке после разрыва строки ( ENTER или
). На строки, переносимые по причине заполнения контейнера эти отступы не распространяются.

Значение hanging добавляет отступ ко всем строкам, кроме первой.

Два последних значения: each-line и hanging являются экспериментальными и не реализованы на данный момент ни в одном из браузеров.

свойство text-wrap

Данное свойство не поддерживается

Свойство text-wrap определяет способ переноса и разрыва строк текста. Данной свойство может принимать одно из 4 значений:

  • normal (нормальный режим) — в этом режиме, при необходимости, строки могут разрываться в стандартных позициях, определенных в спецификации Asmus Freytag. Line Breaking Properties. 29 March 2005. Unicode Standard Annex #14 (пробелы, перевод строки, знаки пунктуации, переносы и т.д.).
  • none — в этом режиме перенос текста запрещен и если строка не помещается в родительский элемент, то она будет выходит за рамки контейнера или растягивать его до необхоимых размеров.
  • unrestricted — в этом режиме разрыв и перенос строки возможен в любом месте и ограничения по разрыву строк не принимаются во внимание.
  • suppress — в этом режиме приоритетными местами разрыва и переноса внутри строки считаются позиции стнури строки, но вне данного элемента. Если таких позиций нет, то место переноса будет выбрано с учетом правил нормального режима.
Илон Маск рекомендует:  Что такое код gzgets

Независимо от установок свойства text-wrap, строки всегда будут переноситься в месте принудительных разрывов (см. спецификацию Asmus Freytag. Line Breaking Properties. 29 March 2005. Unicode Standard Annex #14 )

Свойство text-wrap определено в спецификации CSS 3 модуль Text Level 3 (текст, уровень 3), применяется к всем элементам, и действует на всех визуальные носителях, его значение наследуется от родительского элемента в иерархии документа, и по умолчанию принимает значение normal. На данный момент свойство поддерживается во всех основных браузерах.

CSS word-wrap

The word-wrap property is an alternate name for the overflow-wrap property. It specifies whether or not unbreakable words can in fact be broken arbitrarily to prevent overflow.

When a word or other string is too long to fit inside its box, the word-wrap property can be used to force the word to be broken at an arbitrary point if there are no otherwise-acceptable break points in the line, so that it can wrap to the next line.

The word-wrap property only has an effect when the white-space property allows wrapping (it does by default).

Syntax

Possible Values

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial Represents the value specified as the property’s initial value. inherit Represents the computed value of the property on the element’s parent. unset This value acts as either inherit or initial , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Basic Property Information

Example Code

Basic CSS

Working Example within an HTML Document

CSS Specifications

  • The word-wrap property is defined in CSS Text Module Level 3 (W3C Last Call Working Draft 10 October 2013).

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.

Vendor Prefixes

For maximum browser compatibility many web developers add browser-specific properties by using extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -ms- for Internet Explorer, -moz- for Firefox, -o- for older versions of Opera etc. As with any CSS property, if a browser doesn’t support a proprietary extension, it will simply ignore it.

This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.

The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.

Many developers use Autoprefixer, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don’t need to. It also removes old, unnecessary prefixes from your CSS.

You can also use Autoprefixer with preprocessors such as Less and Sass.

CSS3.com — A comprehensive CSS 3 reference guide, tutorial, and blog

CSS WORD-WRAP

This property specifies whether the current rendered line should break if the content exceeds the boundary of the specified rendering box for an element (this is similar in some ways to the ‘clip’ and ‘overflow’ properties in intent.) This property should only apply if the element has a visual rendering, is an inline element with explicit height/width, is absolutely positioned and/or is a block element.

Examples
Possible Values

normal: Content will exceed the boundaries of the specified rendering box.
break-word: Content will wrap to the next line when necessary, and a word-break will also occur if needed.

97 Responses

hi:
try to use this for unbreakable strings:

Wow, fucking good response there AkSHAT.

hope i’ll get something

be sure to set your css to:

[…] of trial-and-error. The whole class was a terrible mess and a ton of work for functionality that CSS3 word-wrap would fix anyway, but it didn’t take long to realize that the code could be adapted to […]

This works in IE7+, Firefox, and Chrome to me:

The width is needed or the CSS doesn’t work rightly.

#container <
width:200px;
height:200px;
border:solid 1px #333;
word-wrap:break-word;
>

It Will Work On All Browser…
Pls Leave A Reply…

style=’word-wrap:break-word;display:block;’ it works for IE, thanks Faisal

[…] word-wrap: break-word has some browser support […]

Oh Jesus, all these spam comments…. Could you please delete them, it’s so anoying to view these spammers, while trying to code beautiful stuph…

Hi, I am able to word wrap by putting the HTML code like this:
sometext
So see its possible and really easy to wordwrap with HTML. In CSS, it might not support such a syntax depending on your web browser, but the HTML tag is guaranteed to work in IE, Mozilla, and Chrome. I dont know about Opera, because I dont use that web browser, but I guarantee to you it will work in the 3 browsers above. Just use the simple HTML code.

[…] http://www.css3.com/css-word-wrap/ Rate this:Share this:TwitterFacebookLinkedInGoogle […]

[…] มันเป็น CSS ครับ (Cascade Style Sheet) ซึ่งหลายๆคนรู้จักมันในนาม “โค๊ด Hi5″ นั่นเองครับ สำหรับการใช้ css word-wrap ลองไปอ่านจากที่นี่ดูครับ […]

all you have to check is, it could be that the defined limit of the div, is too long or wide. this can be possible if the div has not much content above what you are trying to display, that means it could be a transparent background and it moves too long to the right so much that you cant notice it. Just change the color or add a color to the div, you might see the starting and the ending point of it.

if you find it, then you can surely fix it, if not ask.

CSS3 word-wrap Property

Description

The word-wrap CSS property specifies the line breaks within the word in order to prevent the overflow when a word is too long to fit within the content area of the element.

The following table summarizes the usages context and the version history of this property.

Default value: normal
Applies to: All elements
Inherited: yes
Animatable: No. See animatable properties.
Version: New in CSS3

Syntax

The syntax of the property is given with:

word-wrap : normal | break-word | initial | inherit

The example below shows the word-wrap property in action.

Example

  • p <
  • width : 200px ;
  • background : #90ee90 ;
  • word-wrap : break-word ;
  • >

Property Values

The following table describes the values of this property.

Value Description
normal Lines may only break at normal word break points. This is default value.
break-word Force an unbreakable word to wrap in a new line in order to prevent overflow, if there are no acceptable break points in the line.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element word-wrap property.

Browser Compatibility

The word-wrap property is supported in all major modern browsers.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL