Word wrap normal important

Свойство word-wrap указывает, переносить или нет длинные слова, которые не помещаются по ширине в заданную область.

Краткая информация

Значение по умолчанию normal
Наследуется Да
Применяется Ко всем элементам
Процентная запись Неприменима
Анимируется Нет

Синтаксис

word-wrap: normal | break-word

Синтаксис

Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#

Значения

normal
Строки не переносятся или переносятся в тех местах, где явно задан перенос (например, с помощью <br>).
break-word
Перенос строк добавляется автоматически, чтобы слово поместилось в заданную ширину блока.

Пример

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>word-wrap</title>
<style>
.col {
background: #f0f0f0; /* Цвет фона */
width: 230px; /* Ширина блока */
padding: 10px; /* Поля */
font-size: 1.5em; /* Размер шрифта */
word-wrap: break-word; /* Перенос слов */
}
</style>
</head>
<body>
<div class=»col»>
<p>Cуществительное</p>
<p>высокопревосходительство</p>
<p>Одушевленное существительное</p>
<p>одиннадцатиклассница</p>
<p>Химическое вещество</p>
<p>метоксихлордиэтиламинометилбутиламиноакридин</p>
</div>
</body>
</html>

Результат данного примера показан на рис. 1.

Перенос длинных слов

Рис. 1. Перенос длинных слов

Объектная модель

Объект.style.wordWrap

Спецификация

Спецификация Статус
CSS Text Level 3 Рабочий проект

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

5.5 12 1 10.5 1 3.5

Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

Источник

Полное руководство по word-wrap, overflow-wrap и word-break в CSS

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

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

Вы можете использовать свойства CSS word-wrap, overflow-wrap или word-break для обертывания или переноса слов, которые в противном случае переполнили бы их контейнер. Эта статья представляет собой подробное руководство по свойствам CSS word-wrap, overflow-wrap и word-break, а также о том, как вы можете использовать их, чтобы не допустить, чтобы переполнение содержимого разрушало ваш красиво оформленный макет.

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

Как происходит перенос контента в браузерах?

Браузеры выполняют перенос содержимого в разрешенные брейкпоинты, называемый «мягкой оберткой». Браузер будет обертывать контент с использованием мягкой обертки, если таковая возможна, чтобы минимизировать переполнение контента.

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

Хотя в английских текстах для символов пробела используются мягкие обертки, для неанглийских систем письма ситуация может быть иной. Некоторые языки не используют пробелов для разделения слов. Следовательно, упаковка содержимого зависит от языка или системы письма. Значение атрибута lang, которое вы указываете в элементе html, в основном используется для определения того, какая языковая система используется. В этой статье основное внимание будет уделено системе письма на английском языке.

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

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

В чем разница между мягким и принудительным переносом строки?

Любой перенос текста, который происходит при использовании мягкого переноса, называется разрывом мягкого переноса. Чтобы перенос происходил при использовании мягкого обертывания, необходимо убедиться, что обертывание включено. Например, установка значения nowrap для свойства white-space отключит перенос.

С другой стороны, принудительные разрывы строк возникают из-за явного управления разрывом строк или указания конца или начала блоков текста.

CSS свойства word-wrap и overflow-wrap

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

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

Если у вас есть свойство white-space для элемента, вам необходимо установить для него значение allow, чтобы разрешить эффект переноса для overflow-wrap. Ниже приведены значения свойства overflow-wrap. Вы также можете использовать глобальные значения inherit, initial, revert и unset для overflow-wrap, но здесь мы не будем их рассматривать.

overflow-wrap: normal;

overflow-wrap: anywhere;

overflow-wrap: break-word;

Ниже мы рассмотрим значения свойства CSS overflow-wrap, чтобы понять его поведение.

Normal

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

.my-element{

    overflow-wrap: normal;

}

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

Полное руководство по word-wrap, overflow-wrap и word-break в CSS

Anywhere

Использование значения в аnywhere приведет к разрыву неразрывной строки в произвольных точках между двумя символами. Аnywhere не будет добавлять символ дефиса, даже если вы примените свойство hyphens к этому элементу.
Браузер разорвет слово только в том случае, если отображение слова приведет к переполнению. Если слово вызывает переполнение, оно будет разорвано в точке, где это переполнение произошло.

Когда вы используете аnywhere, браузер будет учитывать возможности мягкого переноса, предоставляемые разрывом слова, при вычислении внутренних размеров min-content:

.my-element{

   overflow-wrap: anywhere;

}

В отличие от предыдущего примера, где мы использовали overflow-wrap: normal, на изображении ниже мы используем overflow-wrap :where. Слово-переполнение, которое невозможно разбить, разбивается на фрагменты текста с помощью overflow-wrap: anywhere, чтобы оно поместилось в своем контейнере.

Полное руководство по word-wrap, overflow-wrap и word-break в CSS

Значение anywhere не поддерживается некоторыми браузерами. На изображении ниже показана поддержка браузерами по данным caniuse.com. Поэтому не рекомендуется использовать overflow-wrap: anywhere, если вы хотите иметь более высокую поддержку браузера.

Полное руководство по word-wrap, overflow-wrap и word-break в CSS

Break-word

Значение break-word похоже на любое другое с точки зрения функциональности. Если браузер может перенести слово без переполнения, то он это сделает. Однако, если слово все еще переполняет контейнер, даже когда оно находится в новой строке, браузер разделит его в точке, где снова произошло бы переполнение:

.my-element{

   overflow-wrap: break-word;

}

На изображении ниже показано, как браузер прерывает переполненный текст в предыдущем разделе, когда вы применяете overflow-wrap: break-word. Вы заметите, что изображение ниже выглядит так же, как изображение в последнем примере. Разница между overflow-wrap: anywhere и overflow-wrap: break-word заключается в вычислении внутренних размеров min-content.

Полное руководство по word-wrap, overflow-wrap и word-break в CSS

Разница между anywhere и break-word очевидна при вычислении внутренних размеров min-content. С break-word браузер не учитывает возможности мягкого переноса, предоставляемые разрывом слова, при вычислении внутренних размеров min-content, но он учитывает возможности мягкого переноса при использовании anywhere.

Значение break-word имеет достойный охват среди последних версий десктопных браузеров. К сожалению, этого нельзя сказать об их мобильном аналоге. Поэтому безопаснее использовать унаследованный word-wrap: break-word вместо более нового overflow-wrap: break-word.

На изображении ниже показана поддержка браузеров overflow-wrap: break-word согласно caniuse.com. Вы заметите, что последние версии десктопных браузеров имеют поддержку, в то время как поддержка некоторых мобильных браузеров неизвестна.

Полное руководство по word-wrap, overflow-wrap и word-break в CSS

Свойство Word-break

Word-break — еще одно свойство CSS, которое вы можете использовать для указания возможности мягкого переноса между символами. Вы можете использовать это свойство, чтобы разбить слово в том месте, где могло произойти переполнение, и перенести его на следующую строку.

Ниже приводится то, что говорится о свойстве CSS word-break в спецификации CSS3:

Это свойство определяет возможности мягкого переноса между буквами, то есть там, где это «нормально» и допустимо для разрывов строк текста. Word-break контролирует, какие типы букв браузер может объединять в неразрывные «слова», заставляя символы CJK вести себя как текст, не относящийся к CJK, или наоборот.

Ниже приведены возможные значения CSS-свойства word-break. Как и для overflow-wrap, вы также можете использовать глобальные значения inherit, initial, revert и unset, но мы не будем рассматривать их здесь:

word-break: normal;

word-break: break-all;

word-break: keep-all;

Break-word также является значением для CSS-свойства word-break, хотя оно устарело. Однако, браузеры по-прежнему поддерживают его. Указание этого свойства имеет тот же эффект, что и word-break: normal и overflow-wrap :where.

Теперь, когда мы знакомы с CSS-свойством break-word и соответствующими ему значениями, давайте подробно рассмотрим их.

Normal

Установка для свойства word-break значение normal будет применять правила разбиения по словам по умолчанию:

.my-element{

   word-break: normal;

}

На изображении ниже показано, что происходит, когда вы применяете стиль word-break: normal к блоку текста, который содержит слово длиннее, чем его контейнер. Вы видите, что в браузере действуют обычные правила разбиения на слова.

Полное руководство по word-wrap, overflow-wrap и word-break в CSS

Break-all

Значение break-all вставит разрыв строки именно в том месте, где текст переполнился бы для некитайских, неяпонских и некорейских систем письма. Слово не будет помещено в отдельную строку, даже если это предотвратит необходимость вставки разрыва строки:

.my-element{

   word-break: break-all;

}

На изображении ниже я применил стиль word-break:break-all к элементу p шириной 240 пикселей, содержащему переполненный текст. Браузер вставил разрыв строки в точке, где могло произойти переполнение, и перенес оставшийся текст в следующую строку.

Полное руководство по word-wrap, overflow-wrap и word-break в CSS

Использование break-all приведет к разрыву слова между двумя символами именно в том месте, где произойдет переполнение в английском и других родственных языковых системах. Однако это не применимо к текстам на китайском, японском и корейском языках (CJK).

Он не применяет то же поведение к текстам CJK, потому что системы письма CJK имеют свои собственные правила для применения брейкпоинтов. Создание разрыва строки между двумя символами произвольно во избежание переполнения может значительно изменить общий смысл текста. Для систем CJK браузер будет применять разрывы строк в том месте, где такие разрывы разрешены.

На изображении ниже показана поддержка браузером word-break: break-word согласно caniuse.com. Хотя последние версии современных веб-браузеров поддерживают это значение, поддержка среди некоторых мобильных браузеров неизвестна.

Полное руководство по word-wrap, overflow-wrap и word-break в CSS

Keep-all

Если вы используете значение keep-all, браузер не будет применять разрывы слов к текстам CJK, даже если происходит переполнение содержимого. Эффект от применения значения keep-all такой же, как и у normal для систем письма, отличных от CJK:

.my-element{

   word-break: keep-all;

}

На изображении ниже применение word-break: keep-all имеет тот же эффект, что и word-break: normal, потому что я использую систему письма, отличную от CJK (английский язык).

Полное руководство по word-wrap, overflow-wrap и word-break в CSS

На изображении ниже показана поддержка браузером word-break: keep-all согласно caniuse.com. Это значение поддерживается в большинстве популярных десктопных браузеров. К сожалению, это не относится к мобильным браузерам.

Полное руководство по word-wrap, overflow-wrap и word-break в CSS

Теперь, когда мы рассмотрели свойства CSS overflow-wrap и word-break, в чем разница между ними?

В чем разница между overflow-wrap и разр word-break?

Вы можете использовать CSS свойства overflow-wrap и word-break для управления переполнением содержимого. Однако существуют различия в способах обработки этих двух свойств.

Использование overflow-wrap приведет к переносу всего переполненного слова в новую строку, если оно может поместиться в одну строку, не переполняя свой контейнер. Браузер разорвет слово только в том случае, если он не сможет разместить слово в новой строке без переполнения. В большинстве случаев свойство overflow-wrap или его устаревшее название word-wrap может быть достаточным для управления переполнением содержимого.

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

С другой стороны, word-break безжалостно разорвет слово, которое выходит за границы, между двумя символами, даже если размещение его в новой строке устранит необходимость в разрыве слова. Кроме того, некоторые системы письма, такие как системы письма CJK, имеют строгие правила разбиения по словам, которые браузер принимает во внимание при создании разрывов строк с помощью word-break.

Заключение

Как указывалось в предыдущих разделах, overflow-wrap и word-break во многом схожи. Вы можете использовать оба из них для управления разрывом строки.

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

Если вы хотите управлять переполнением содержимого, вам достаточно использовать overflow-wrap или его устаревшее название word-wrap.

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

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

Автор: Joseph Mawa

Источник: blog.logrocket.com

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

Источник
Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1.0+ 10.5+ 1.0+ 3.5+ 1.0+ 1.0+

Краткая информация

Значение по умолчанию normal
Наследуется Да
Применяется Ко всем элементам
Процентная запись Неприменима
Ссылка на спецификацию http://www.w3.org/TR/css3-text/#word-wrap

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

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

Синтаксис

word-wrap: normal | break-word | inherit

Значения

normal
Строки не переносятся или переносятся в тех местах, где явно задан перенос (например, с помощью тега <br>).
break-word
Перенос строк добавляется автоматически, чтобы слово поместилось в заданную ширину блока.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>word-wrap</title>
  <style>
   .col { 
    background: #f0f0f0; /* Цвет фона */
    width: 230px; /* Ширина блока */
    padding: 10px; /* Поля */
    font-size: 1.5em; /* Размер шрифта */
    word-wrap: break-word; /* Перенос слов */ 
   }
  </style>
 </head>
 <body> 
  <div class="col">
   <p>Cуществительное</p>
   <p>высокопревосходительство</p>
   <p>Одушевленное существительное</p>
   <p>одиннадцатиклассница</p>
   <p>Химическое вещество</p>
   <p>метоксихлордиэтиламинометилбутиламиноакридин</p>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Перенос длинных слов

Рис. 1. Перенос длинных слов

Источник

How can text like aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa which exceeds the width of a div (say 200px) be wrapped?

I am open to any kind of solution such as CSS, jQuery, etc.

trejder's user avatar

trejder

17k27 gold badges123 silver badges215 bronze badges

asked Jul 18, 2009 at 15:56

Satya Kalluri's user avatar

Satya KalluriSatya Kalluri

5,1084 gold badges27 silver badges37 bronze badges

Try this:

div {
    width: 200px;
    word-wrap: break-word;
}

answered Jul 18, 2009 at 16:02

Alan Haggai Alavi's user avatar

Alan Haggai AlaviAlan Haggai Alavi

72.2k19 gold badges101 silver badges127 bronze badges

6

On bootstrap 3, make sure the white-space is not set as ‘nowrap’.

div {
  width: 200px;
  word-break: break-all;
  white-space: normal;
}

answered Nov 12, 2013 at 8:39

lukaserat's user avatar

2

You can use a soft hyphen like so:

aaaaaaaaaaaaaaa&shy;aaaaaaaaaaaaaaa

This will appear as

aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa

if the containing box isn’t big enough, or as

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

if it is.

Tunaki's user avatar

Tunaki

131k46 gold badges330 silver badges415 bronze badges

answered Jul 18, 2009 at 16:13

Kim Stebel's user avatar

Kim StebelKim Stebel

41.6k12 gold badges125 silver badges142 bronze badges

7

div {
    /* Set a width for element */
    word-wrap: break-word
}

The ‘word-wrap‘ solution only works in IE and browsers supporting CSS3.

The best cross browser solution is to use your server side language (php or whatever) to locate long strings and place inside them in regular intervals the html entity ​
This entity breaks the long words nicely, and works on all browsers.

e.g.

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa

code's user avatar

code

5,1204 gold badges16 silver badges37 bronze badges

answered Jul 18, 2009 at 16:14

Orr Siloni's user avatar

Orr SiloniOrr Siloni

1,24010 silver badges20 bronze badges

1

This worked for me

word-wrap: normal;
word-break: break-all;
white-space: normal;
display: block;
height: auto;
margin: 3px auto;
line-height: 1.4;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;

answered Jun 2, 2016 at 2:04

Amol's user avatar

AmolAmol

9087 silver badges20 bronze badges

1

The only one that works across IE, Firefox, chrome, safari and opera if there are no spaces in the word (such as a long URL) is:

div{
    width: 200px;  
    word-break: break-all;
}

I found this to be bullet-proof.

Radek Postołowicz's user avatar

answered Apr 12, 2013 at 13:56

Kyle Dearle's user avatar

Kyle DearleKyle Dearle

1291 gold badge2 silver badges9 bronze badges

0

Another option is also using:

div
{
   white-space: pre-line;
}

This will set all your div elements in all browsers that support CSS1 (which is pretty much all common browsers as far back as IE 8)

answered Oct 14, 2014 at 15:59

Andrew Marais's user avatar

1

Cross Browser

.wrap
{
    white-space: pre-wrap; /* css-3 */    
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */    
    white-space: -o-pre-wrap; /* Opera 7 */    
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

Community's user avatar

answered Apr 20, 2015 at 9:21

Timeless's user avatar

TimelessTimeless

7,2898 gold badges60 silver badges94 bronze badges 

<p style="word-wrap: break-word; word-break: break-all;">
    Adsdbjf bfsi hisfsifisfsifs shifhsifsifhis aifoweooweoweweof
</p>

answered Oct 1, 2020 at 20:23

Manoj Alwis's user avatar

Manoj AlwisManoj Alwis

1,27911 silver badges24 bronze badges

Example from CSS Tricks:

div {
    -ms-word-break: break-all;

    /* Be VERY careful with this, breaks normal words wh_erever */
    word-break: break-all;

    /* Non standard for webkit */
    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

More examples here.

answered Feb 4, 2015 at 10:01

Juraj Guniš's user avatar

In HTML body try:

<table>
    <tr>
        <td>
            <div style="word-wrap: break-word; width: 800px">
                Hello world, how are you? More text here to see if it wraps after a long while of writing and it does on Firefox but I have not tested it on Chrome yet. It also works wonders if you have a medium to long paragraph. Just avoid writing in the CSS file that the words have to break-all, that's a small tip.
            </div>
        </td>
    </tr>
</table>

In CSS body try:

background-size: auto;

table-layout: fixed;

John Slegers's user avatar

John Slegers

44.5k22 gold badges201 silver badges169 bronze badges

answered Feb 6, 2016 at 17:06

Wesson2's user avatar

Add this CSS to the paragraph.

width:420px; 
min-height:15px; 
height:auto!important; 
color:#666; 
padding: 1%; 
font-size: 14px; 
font-weight: normal;
word-wrap: break-word; 
text-align: left;

TylerH's user avatar

TylerH

20.6k64 gold badges76 silver badges97 bronze badges

answered May 23, 2012 at 9:53

Swapnil Godambe's user avatar

Swapnil GodambeSwapnil Godambe

2,0541 gold badge24 silver badges28 bronze badges

1

Try this

div{
  display: block;
  display: -webkit-box;
  height: 20px;
  margin: 3px auto;
  font-size: 14px;
  line-height: 1.4;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

the property text-overflow: ellipsis add … and line-clamp show the number of lines.

answered Nov 27, 2014 at 21:10

Vladimir Salguero's user avatar

I have used bootstrap.
My html code looks like ..

<div class="container mt-3" style="width: 100%;">
  <div class="row">
    <div class="col-sm-12 wrap-text">
      <h6>
        text content
      </h6>
    </div>
  </div>
</div>

CSS

.wrap-text {
     text-align:justify;
}

Stephen Rauch's user avatar

Stephen Rauch♦

47.2k31 gold badges110 silver badges133 bronze badges

answered Sep 18, 2018 at 2:24

Rahul Wasnik's user avatar

1

you can use this CSS

p {
  width: min-content;
  min-width: 100%;
}

answered Dec 27, 2019 at 10:22

Rashid Iqbal's user avatar

Rashid IqbalRashid Iqbal

1,05313 silver badges12 bronze badges

Try this CSS property —

overflow-wrap: anywhere;

answered Jun 9, 2022 at 6:12

Akshay Chavan's user avatar

A server side solution that works for me is: $message = wordwrap($message, 50, "<br>", true); where $message is a string variable containing the word/chars to be broken up. 50 is the max length of any given segment, and "<br>" is the text you want to be inserted every (50) chars.

answered Jan 23, 2012 at 7:31

deshbanks's user avatar

1

Try this 

div {display: inline;}

answered Jul 18, 2018 at 16:58

Michael Mulikita's user avatar

try:

overflow-wrap: break-word;

borchvm's user avatar

borchvm

3,48411 gold badges45 silver badges43 bronze badges

answered Jan 29, 2020 at 3:00

Eden Sharvit's user avatar

Use word-wrap:break-word attribute along with required width. Mainly, put
the width in pixels, not in percentages.

width: 200px;
word-wrap: break-word;

JSuar's user avatar

JSuar

21.1k4 gold badges43 silver badges82 bronze badges

answered Jan 27, 2011 at 8:36

aks's user avatar

1

Источник

How to wrap text in cssThe CSS word wrap property will help you break long words and wrap them to the next line. Usually, it is a great way of preventing overflow when a string becomes too long to remain inside its container. In this guide, you will learn how this CSS property works.

Contents

  • How to Wrap Text in CSS
  • Accepted Parameters or Values
    • – How the normal Value Works
    • – How To Use the anywhere Value
    • – How To Use the break-word Value
    • – How To Use the inherit Value
    • – Similarities and Differences Between Break-word and Anywhere Values
  • Note to Developers
    • – Example – Using the overflow-wrap Property
  • Conclusion

CSS allows you to break long words using the word-wrap property and CSS text wrapping them onto the next line. The property helps you avoid strangely long strings of text that may result in overflow issues. By using it, you let the browser know that it can break a line within an element into multiple lines in otherwise unbreakable places.

The syntax for the property is:

#element
{
word-wrap: value;
}

Accepted Parameters or Values

The word-wrap property accepts the following CSS text wrap parameters:

  • normal – It is the default value that allows a browser to break lines depending on the normal rules of breaking a line. In the case of unbroken strings or words, it will not break them even when they overflow their containers.
  • break-word – The value breaks strings or long words in arbitrary places to force strings that are too long to fit inside their containers. It does not add a hyphen even when you set the hyphen property.
  • anywhere – This value lets you break URLs or long strings at any point if the text does not have an acceptable breakpoint. However, the value will not add a hyphen even when you define it.
  • inherit – With this value, you let the word-wrap property inherit the value set in the immediate parent element.
  • initial – It allows the property to use its default value.

– How the normal Value Works

If you set the word-wrap property to normal, you will be letting the browser use the default line-breaking behavior. In English and related writing systems, a line break happens where there is a hyphen or white space.

Therefore, when you use the normal parameter, the strings or long words break at allowable places such as spaces between words, full stops, or comma separation. The value will not break long strings even when they cross the boundary of their container.

Example – Using the normal Value

Suppose you are creating the homepage for a local barbershop. Within the page, you decide to use a <div> tag to display the welcome message and a brief introduction. After this, you decide to set the word-wrap property to normal.

To get started, you need to create the content in the <div> tag in HTML like so:

<div id=”wordwrap”>
<h1>Welcome to 001 Barbershop</h1>
<p> Here we give you all the attention and service you deserve. Sit down, relax, and enjoy our services and products.
<br><br>
Thistextistoolongfornogoodreason
</p>
<br><br>
</div>

Next, use CSS to position the <div> tag at the center, add a border, set background color, and define the height and width of the div element. Moreover, remember to set the word-wrap property to normal. Here is how you can accomplish this in CSS:

#wordwrap
{
position: relative;
left: 50%;
border: solid blue 5px;
text-align: center;
background-color: orange;
width: 200px;
height: 300px;
word-wrap: normal;
}

In this example, you will notice there is a word that is longer than the container. The latter happens because the word does not provide a soft wrap opportunity and the value of the word-wrap property is normal. Thus, the word overflows the <div> container. This is a clear notion of the default line-breaking behavior.

– How To Use the anywhere Value

In CSS, this value will break a string if showing it in its line will overflow its container. When the string still overflows the container when placed in its line, the “anywhere” parameter will break the string at the point where the overflow would happen.

It is a new value that lets you break an otherwise unbreakable string at arbitrary places provided there are no acceptable breakpoints. The value helps address the compatibility issues associated with the “break-word” value.

When using the “anywhere” value, the browser will take into account the soft wrap opportunities brought by the word break as it calculates the min-content intrinsic sizes.

Example – Using the Anywhere Value

Suppose you want to make sure everything in the <div> tag on the barbershop landing page fits within the container. Wrap text in the <div> element using the “anywhere” parameter. Here is an example of how CSS wrap text in div works:

#wordwrap
{
position: relative;
left: 50%;
border: solid blue 5px;
text-align: center;
background-color: orange;
width: 200px;
height: 300px;
word-wrap: anywhere;
}

In other words, the value will break all the long strings to ensure they fit in the <div> element.

– How To Use the break-word Value

With the break-word value, you give the browser the liberty to wrap the overflowing word into its container without overflowing. However, when the word overflows the container when it is still on its line, the browser is going to break it at the point where the overflow would occur.

Example – Using the Break-word Value

Suppose you want to ensure that the content in the <div> tag does not overflow the container. Using the barbershop landing page example, you can ensure this by breaking any word that overflows the div container. Here is an example of how you can make text wrap in CSS with ease:

#wordwrap
{
position: relative;
left: 50%;
border: solid blue 5px;
text-align: center;
background-color: orange;
width: 200px;
height: 300px;
word-wrap: break-word;
}

In this example, you will notice that the overflowing word is broken to fit in its container. With the break-word value, the browser no longer considers soft wrap opportunities as it calculates the min-content intrinsic sizes.

– How To Use the inherit Value

With this value, you get to set the word-wrap property for a child element to be the same as that of the immediate parent. Keep in mind that it will not work with long strings unless you use the “break-word” value in the parent element.

Example – Using the Inherit Value

Say the barbershop owners want you to add another paragraph in the <div> tag. In this new paragraph, they want you to use a similar word-wrap value to the parent div element. In CSS, you can accomplish this like so:

#wordwrap
{
position: relative;
left: 50%;
border: solid blue 5px;
text-align: center;
background-color: orange;
width: 200px;
height: 300px;
word-wrap: break-word;
}
p
{
word-wrap: inherit;
}

– Similarities and Differences Between Break-word and Anywhere Values

Both of these values break a string into pieces in arbitrary points in order for it to fit inside its container and avoid overflowing. Moreover, they do not add a hyphen where they break the string even if you set it.

When you set the word-wrap property to “anywhere”, you let the browser consider soft wrap as it calculates the minimum content size. However, the “break-word” value does not consider soft wrap when calculating the minimum content size.

Example – Showing the Difference Between anywhere and break-word Values

Suppose the barbershop owners want the website to welcome each member with a message. You can use either anywhere or break-word value to wrap the welcome message. For example, you can display “Welcome David” to David.

First, here is the HTML code for the example:

<div id =”anywhere”> Welcome David (anywhere)</div>
<div id =”break-word”> Welcome David (break-word)</div>

Now, here is the CSS to display the message and wrap it using the different parameters.

div
{
display: inline-block;
width: min-content;
padding: 15px;
border: solid orange;
vertical-align: top;
}
#anywhere
{
word-wrap: anywhere;
}
#break-word
{
word-wrap: break-word;
}

You will notice that the “anywhere” parameter considers the minimum width of the element to be the width after breaking each word. On the other hand, the “break-word” parameter calculates the declared element using the default minimum width rule.

Note to Developers

Please note that the word-wrap property is the legacy name for the overflow-wrap property. The latest browsers are implementing CSS text overflow wrap to allow browsers to break a long string at otherwise unacceptable points in a line as a way of avoiding overflow. For compatibility, they are treating word-wrap as an alias for the overflow-wrap property.

You can use any of these properties in CSS to wrap text since they behave the same way. What’s more, the overflow-wrap property accepts the same parameters as the word-wrap property.

The syntax for the overflow-wrap property is:

overflow-wrap: normal | break-word | anywhere | initial | inherit;

However, if you want browser support that is almost universal, then the word-wrap property is better off compared to the overflow-wrap property. For legacy reasons, browsers are still supporting the word-wrap property.

– Example – Using the overflow-wrap Property

Suppose you now decide to use the overflow-wrap property to display a welcome message to visitors of your barbershop website. Here is how you can accomplish this:

#wordwrap
{
position: relative;
left: 50%;
border: solid blue 5px;
text-align: center;
background-color: orange;
width: 200px;
height: 300px;
overflow-wrap: break-word;
}

Conclusion

The word-wrap property in CSS provides you with a unique way of wrapping text to prevent it from overflowing its container. In this guide, you learned how to use the property and its parameters. Here is a recap:

  • CSS lets you use either word-wrap or overflow-wrap to break long strings
  • The two properties share the same parameters or values; parameters include normal, break-word, anywhere, initial, and inherit
  • The normal and initial parameters refer to the default values
  • Using the inherent value allows a child element to inherit the value of the immediate parent element
  • Both break-word and anywhere values allow a browser to break a long string at a rather unacceptable point to avoid overflow

Css word wrap propertyNow that you understand how to use the word-wrap property in CSS, go ahead and start using it as a professional web developer.

  • Author
  • Recent Posts

Position is Everything

Your Go-To Resource for Learn & Build: CSS,JavaScript,HTML,PHP,C++ and MYSQL. Meet The Team

Position is Everything

Источник

Понравилась статья? Поделить с друзьями:
  • Word wrap max width
  • Word worth of gaiden
  • Word world скачать на русском
  • Word world мультфильм на английском с субтитрами
  • Word world word things