White space and word wrap break word - Word и Excel - помощь в работе с программами

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

Интерактивный пример

Сводка

/* Ключевые значения */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;

/* Глобальные значения */
white-space: inherit;
white-space: initial;
white-space: unset;

Начальное значение	`normal`
Применяется к	все элементы
Наследуется	да
Обработка значения	как указано
Animation type	discrete

Синтаксис

Свойство white-space определяется, как одно ключевое слово, выбранное из списка значений, указанных ниже.

Значения

normal

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

nowrap

Объединяет последовательности пробелов в один пробел, как значение normal, но не переносит строки (оборачивание текста) внутри текста.

pre

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

pre-wrap

pre-line

Последовательности пробелов объединяются в один пробел. Строки разбиваются по символам новой строки, по элементам <br>, и при необходимости для заполнения строчных боксов..

break-spaces

Поведение идентично pre-wrap со следующими отличиями:

Последовательности пробелов сохраняются так, как они указаны в источнике, включая пробелы на концах строк.
Строки переносятся по любым пробелам, в том числе в середине последовательности пробелов.
Пробелы занимают место и не висят на концах строк, а значит влияют на внутренние размеры (min-content и max-content).

В приведённой ниже таблице указано поведение различных значений свойства white-space:

	Новые строки	Пробелы и табуляция	Перенос текста по словам	Пробелы в конце строки
`normal`	Объединяются в одну	Объединяются в один пробел	Переносится	Удаляются
`nowrap`	Объединяются в одну	Объединяются в один пробел	Не переносится	Удаляются
`pre`	Сохраняются как в источнике	Сохраняются как в источнике	Не переносится	Сохраняются как в источнике
`pre-wrap`	Сохраняются как в источнике	Сохраняются как в источнике	Переносится	Висят
`pre-line`	Сохраняются как в источнике	Объединяются в один пробел	Переносится	Удаляются
`break-spaces`	Сохраняются как в источнике	Сохраняются как в источнике	Переносится	Переносятся

Формальный синтаксис

white-space = 
  normal        | (en-US)
  pre           | (en-US)
  nowrap        | (en-US)
  pre-wrap      | (en-US)
  break-spaces  | (en-US)
  pre-line

Примеры

Основной пример

code {
  white-space: pre;
}

Перенос строк внутри элементов `<pre>`

pre {
  word-wrap: break-word;      /* IE 5.5-7 */
  white-space: pre-wrap;      /* текущие браузеры */
}

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

Specification
CSS Text Module Level 3 # white-space-property

Браузерная совместимость

BCD tables only load in the browser

Источник

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

Свойство white-space

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

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

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

Подробнее o white-space на w3.org

Свойство word-wrap

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

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

normal: Переносы строк будут формироваться только в дозволенных позициях.
break-word: Слово будет разрываться, если в пределах строки нет подходящей позиции для переноса строки.

Это свойство можно использовать для переноса строк в теге <pre> даже в старых версиях IE:

pre {
  word-wrap: break-word; /* IE 5.5-7 */
  white-space: pre-wrap; /* current browsers */
}

Подробнее o word-wrap (overflow-wrap) на w3.org

Свойство word-break

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

.text_user-generated_yes {
  word-break: break-all;
}

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

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

Подробнее o word-break на w3.org

Свойство hyphens

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


.text {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

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

Подробнее o hyphens на w3.org

Источник

I need to fit a long text to a width of about 300 pixels. I’m using this css:

 div {      
      width: 300px;
      color:white;
      word-wrap:break-word;
      }

My issue is with the word-wrap:break-word;. It’s breaking words in the middle of the word. But what I need is to have the words stay as they are, and for the document to be smart enough to break the line when appropriate, and keep the words themselves intact.

Is that possible? I tried every option of word-wrap but nothing works. Either the paragraphs are not breaking and the text stays off screen, or the words break and a couple of letters are in one line, while other letters are in the following line.

EDIT: adding my code to form a concrete example. My entire style element:

<style type="text/css">
    p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px OpenSansHebrew-Regular}
    p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px OpenSansHebrew-Regular; min-height: 12.0px}

div {
    width: 300px;
    color:white;
    font-size:10px;
    word-wrap:break-word;
}

pre {white-space:break;}

</style>

Then in the body element:

<body bgcolor="#1fa0e2">
<p class="p1">
<div>
<bdo dir="rtl">
<pre>
    דירת 3 חדרים ברחוב ארתור רובינשטיין בתל אביב הוצעה באחרונה למכירה ב–2.5 מיליון שקל, ובסופו של דבר נמכרה ב–2.195 מיליון בלבד - פער של 12% בין המחיר המבוקש למחיר המכירה. בירושלים, דירת 4 חדרים ברחוב צביה יצחק הוצעה למכירה ב–1.6 מיליון שקל ונמכרה ב–40% פחות - 950 אלף שקל בלבד.

</pre>
</div>
</bdo>
<span class="Apple-converted-space"> </span></p>

</body>
</html>

Источник

CSS white-space is a property that gives you the ability to control the whitespace and line breaks in the text on a web page. As you might already know, whitespace on a text can be powerful from a creative point of view as well as from a purely formatting aspect. So, this is why it is important that you know how to use this property effectively in code.

Read on as we will explain it in great detail along with some code examples that you can use in your project.

Contents

Possible Values for CSS White-space
- – Normal
- – Nowrap
- – Pre
- – Pre-wrap
- – Pre-line
- – Break-spaces
Summary of CSS White-space values
Possible Uses
- – Insert Line Breaks in Definition Lists
- – Typing Animation
When Things Go Wrong
- – White-space Pre-line Extra Space
- – White-space: Pre Not Working as Expected
- – White-space Pre-wrap Not Working in Internet Explorer
- – White-space Nowrap With Ellipse
CSS White-space vs Word-wrap
Web Browser Support
Conclusion

Possible Values for CSS White-space

The possible values for CSS white-space are:

normal
nowrap
pre
pre-wrap
preline
Break-spaces

In this first part of our article, we will be diving deeper into each of those values, so you fully understand each one’s scope.

– Normal

This is the default value, where the web browser will collapse a sequence of whitespace into a single one. Aso, if need be, the text will wrap into a new line.

The next HTML block has some whitespace, but when you view it in the web browser, they are all collapsed. Feel free to run this and see how it works:

<main>
<span class=”wrap-info”>
<code>white-space: normal</code>
</span>
<div class=”white-space-normal”>
<p>Lorem ipsum dolor sit amet, consectetur.
Ut enim ad minim veniam,
quis nostrud.
Duis aute irure dolor in reprehenderit in voluptate velit esse</p>
</div>
</main>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: grid;
place-items: center;
height: 100vh;
}
main {
width: 50%;
border: 5px solid #1560bd;
padding: 2em;
font-size: 1.2em;
line-height: 1.168;
position: relative;
}
.wrap-info {
position: absolute;
bottom: -3.2em;
left: -0.25em;
padding: 1em;
background-color: #1560bd;
color: #ffffff;
font-weight: bold;
}
.white-space-normal {
white-space: normal;
}

– Nowrap

With CSS white space nowrap, the web browser will collapse a good deal of whitespace into a single one. What’s more, the text will not wrap into a new line.

When you run the next code in your browser, you’ll observe that all the text appears on a single line. As a result, it leads to an overflow:

<main>
<span class=”wrap-info”>
<code>white-space: nowrap</code>
</span>
<div class=”white-space-nowrap”>
<p>Lorem ipsum dolor sit amet, consectetur.
Ut enim ad minim veniam,
quis nostrud.
Duis aute irure dolor in reprehenderit in voluptate velit esse</p>
</div>
</main>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: grid;
place-items: center;
height: 100vh;
}
main {
width: 50%;
border: 5px solid #c00;
padding: 2em;
font-size: 1.2em;
line-height: 1.168;
position: relative;
}
.wrap-info {
position: absolute;
bottom: -3.2em;
left: -0.25em;
padding: 1em;
background-color: #c00;
color: #ffffff;
font-weight: bold;
}
.white-space-nowrap {
white-space: nowrap;
}

– Pre

White-space: pre behaves like the

 tag in HTML

. As a result, the web browser will preserve all the whitespace. The text will wrap if it contains a newline character or a line-break element like <br>.

Moreover, the next code demonstrates will help you understand how this works in a web browser. When you run the code, you’ll observe that all whitespace appears as it is in the HTML:

<main>
<span class=”wrap-info”>
<code>white-space: pre</code>
</span>
<div class=”white-space-pre”>
<p>Lorem ipsum dolor sit amet, consectetur.
Ut enim ad minim veniam,
quis nostrud.
Duis aute irure dolor in reprehenderit in voluptate velit esse</p>
</div>
</main>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: grid;
place-items: center;
height: 100vh;
}
main {
width: 50%;
border: 5px solid #321fb7;
padding: 2em;
font-size: 1.2em;
line-height: 1.168;
position: relative;
}
.wrap-info {
position: absolute;
bottom: -3.2em;
left: -0.25em;
padding: 1em;
background-color: #321fb7;
color: #ffffff;
font-weight: bold;
}
.white-space-pre {
white-space: pre;
}

– Pre-wrap

This is like white-space: pre, but the white-space pre-wrap text will wrap the text if required.

Now, when you run the next code block in your web browser, some text will wrap to a new line, even if it’s a single text:

<main>
<span class=”wrap-info”>
<code>white-space: pre-wrap</code>
</span>
<div class=”white-space-pre-wrap”>
<p>Lorem ipsum dolor sit amet, consectetur.
Ut enim ad minim veniam,
quis nostrud.
Duis aute irure dolor in reprehenderit in voluptate velit esse</p>
</div>
</main>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: grid;
place-items: center;
height: 100vh;
}
main {
width: 50%;
border: 5px solid #060223;
padding: 2em;
font-size: 1.2em;
line-height: 1.168;
position: relative;
}
.wrap-info {
position: absolute;
bottom: -3.2em;
left: -0.25em;
padding: 1em;
background-color: #060223;
color: #ffffff;
font-weight: bold;
}
.white-space-pre-wrap {
white-space: pre-wrap;
}

– Pre-line

White-space: pre-line will collapse a sequence of white space into a single one. Also, the text will wrap at line breaks, newline characters, and when it’s necessary.

The next code block will show you how white-space: pre-line works in a web browser, so check it out:

<main>
<span class=”wrap-info”>
<code>white-space: pre-line</code>
</span>
<div class=”white-space-pre-line”>
<p>Lorem ipsum dolor sit amet, consectetur.
Ut enim ad minim veniam,
quis nostrud.
Duis aute irure dolor in reprehenderit in voluptate velit esse</p>
</div>
</main>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: grid;
place-items: center;
height: 100vh;
}
main {
width: 50%;
border: 5px solid #060223;
padding: 2em;
font-size: 1.2em;
line-height: 1.168;
position: relative;
}
.wrap-info {
position: absolute;
bottom: -3.2em;
left: -0.25em;
padding: 1em;
background-color: #060223;
color: #ffffff;
font-weight: bold;
}
.white-space-pre-line {
white-space: pre-line;
}

– Break-spaces

This is like white-space: pre, with the following exceptions:

All preserved white space will take up space, even at the end of the line
White space preservation takes precedence over line break characters. Irrespective of the position of the whitespace character
The preserved white space affect the box’s min-content size and max-content size

In the next HTML code, there is lots of space added so you can see how this particular value works on the web page:

<main>
<span class=”wrap-info”>
<code>white-space: break-spaces</code>
</span>
<div class=”white-space-break-spaces”>
<p>Lorem ipsum dolor sit amet, consectetur.
Ut enim ad minim veniam,
quis nostrud.
Duis aute irure dolor in reprehenderit in voluptate velit esse</p>
</div>
</main>

Summary of CSS White-space values

The table below is a summary of all CSS white space values and what happens when you use each one:

	Text wrapping	Spaces and tabs	New lines	End-of-line spaces
normal	Wrap	Collapse	Collapse	Remove
nowrap	No wrap	Collapse	Collapse	Remove
pre	No wrap	Preserve	Preserve	Preserve
pre-wrap	Wrap	Preserve	Preserve	Hang
pre-line	Wrap	Collapse	Preserve	Remove
break-spaces	Wrap	Preserve	Preserve	Wrap

Possible Uses

You can use CSS white-space to create the following:

Insert line breaks in definition list
Typing animation

Let’s review each ouse-case so we can see how you can implement it in your code!

– Insert Line Breaks in Definition Lists

The elements of the definition list (<dt> and <dd>) are block-level elements. As a result, each of them will appear on a new line. Moreover, you can use white-space: pre to render the list in a presentable manner in the web browser:

<main>
<span class=”wrap-info”>
<code>White-space: Insert space in Definition List</code>
</span>
<dl class=”definition-list”>
<dt class=”definition-term”>Name</dt>
<dd class=”definition-description”>John Doe</dd>
<dt class=”definition-term”>Email</dt>
<dd class=”definition-description”>john.doe@no-mail.com</dd>
<dd class=”definition-description”>john.doe@no-mail.com</dd>
<dt class=”definition-term”>Location</dt>
<dd class=”definition-description”>127.0.0.1</dd>
</dl>
</main>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: grid;
place-items: center;
height: 100vh;
}
main {
width: 50%;
border: 5px solid #095a96;
padding: 2em;
font-size: 1.2em;
line-height: 1.168;
position: relative;
}
.wrap-info {
position: absolute;
bottom: -3.2em;
left: -0.25em;
padding: 1em;
background-color: #095a96;
color: #ffffff;
font-weight: bold;
}
.definition-term,
.definition-description {
display: inline;
}
.definition-description {
margin: 0;
font-weight: bold;
}
.definition-description + .definition-term::before {
content: ‘A’;
white-space: pre;
}
.definition-description + .definition-description::before {
content: ‘, ‘;
font-weight: normal;
}

– Typing Animation

In a typing animation, the text should appear on a single line without breaking into another line. This is achievable with the use of white-space: nowrap. Without it, the text will break into another line.

The next code block will show you how typing animation works in the web browser. Needless to say, white-space: nowrap plays a key role:

<div class=”typing-animation”>
<p>Typing animation</p>
</div>
body {
padding: 2em;
}
.typing-animation p {
font-size: 1em;
border-right: 0.5em solid #1560bd;
overflow: hidden;
width: 7.3em;
animation: typingAnimation 2s steps(40, end);
animation-fill-mode: forwards;
white-space: nowrap;
}
@keyframes typingAnimation {
0% {
width: 0;
}
99.9% {
border-right: 0.5em solid #1560bd;
}
100% {
border: none;
}
}

When Things Go Wrong

We took our time to identify some situations when white-space won’t work as expected. Also, we’ll discuss their potential solutions, which are:

White-space pre-line extra space
White-space pre not working as expected
White-space pre-wrap not working in Internet Explorer
White-space nowrap with ellipse

This happens when you have line breaks in your HTML code. Line-breaks can be newline characters (enter key on your keyboard) or HTML <br> elements.

So anytime you are using white-space: preline, look out for extra space at the top or bottom of the element in the HTML.

For example, in the next code block, there are four line breaks in the HTML. With white-space: pre-line, the web browser preserves the line breaks. As a result, the web browser will add unusual space at the top of the text:

<main>
<span class=”wrap-info”>
<code>white-space: pre-line extra space</code>
</span>
<div class=”white-space-pre-line”>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</div>
</main>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: grid;
place-items: center;
height: 100vh;
}
main {
width: 50%;
border: 5px solid #060223;
padding: 2em;
font-size: 1.2em;
line-height: 1.168;
position: relative;
}
.wrap-info {
position: absolute;
bottom: -3.2em;
left: -0.25em;
padding: 1em;
background-color: #060223;
color: #ffffff;
font-weight: bold;
}
.white-space-pre-line {
white-space: pre-line;
}

– White-space: Pre Not Working as Expected

If a text contains many carriage returns and you want to display them on many lines, you can use white-space: pre. However, this will not work as expected. The fix is to use white-space: pre-line.

The next code shows how to do this, so all you have to do is change the white-space value to pre-line, and you’ll get each text on a new line:

<main>
<span class=”wrap-info”>
<code>white-space: pre not working</code>
</span>
<div class=”white-space-pre-not-working”>
<p>My name is John,
I am from Boston,
I am a Software Engineer.</p>
</div>
</main>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: grid;
place-items: center;
height: 100vh;
}
main {
width: 50%;
border: 5px solid #330ceb;
padding: 2em;
font-size: 1.2em;
line-height: 1.168;
position: relative;
}
.wrap-info {
position: absolute;
bottom: -3.2em;
left: -0.25em;
padding: 1em;
background-color: #330ceb;
color: #ffffff;
font-weight: bold;
}
.white-space-pre-not-working {
/**
* This will not work as intended.
white-space: pre; */
/**
* Instead, use pre-line
*/
white-space: pre-line;
}

– White-space Pre-wrap Not Working in Internet Explorer

At this point, we should mention that the CSS white space pre wrap works in Internet Explorer version eight and higher. Now that you know that, you can avoid possible errors!

– White-space Nowrap With Ellipse

CSS white-space: nowrap will cause all the text to appear on a single line, and so at times, you might truncate the text. If you want the truncated text to have an ellipse at the end, you can use the following CSS code:

.text-selector {
display: block;
width: 50%;
min-width: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

The next code block is a full example that you can run in your web browser:

<main>
<span class=”wrap-info”>
<code>white-space: no-wrap on text</code>
</span>
<div class=”no-wrap-on-text”>
<p>My name is John,
I am from Boston,
I am a Software Engineer.</p>
</div>
</main>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: grid;
place-items: center;
height: 100vh;
}
main {
width: 50%;
border: 5px solid #431c97;
padding: 2em;
font-size: 1.2em;
line-height: 1.168;
position: relative;
}
.wrap-info {
position: absolute;
bottom: -3.2em;
left: -0.25em;
padding: 1em;
background-color: #431c97;
color: #ffffff;
font-weight: bold;
}
.no-wrap-on-text p {
display: block;
width: 50%;
min-width: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

CSS White-space vs Word-wrap

CSS white-space and its values control white space in a text. Word-wrap allows you to break an unbreakable long string into a new line. An “unbreakable long string” means the text should not have any spaces in it.

The next code block shows how word-wrap works in a web browser, so all you have to do is run the code and observe what happens. Also, when you delete the word-wrap from the CSS code, the text will overflow its container:

<main>
<span class=”wrap-info”>
<code>white-space vs word-wrap</code>
</span>
<div class=”white-space-word-wrap”>
<p>Theisisanunbreakabletext.Theisisanunbreakabletext.Theisisanunbreakabletext.Theisisanunbreakabletext.Theisisanunbreakabletext.</p>
</div>
</main>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: grid;
place-items: center;
height: 100vh;
}
main {
width: 50%;
border: 5px solid #3677f4;
padding: 2em;
font-size: 1.2em;
line-height: 1.168;
position: relative;
}
.wrap-info {
position: absolute;
bottom: -3.2em;
left: -0.25em;
padding: 1em;
background-color: #3677f4;
color: #ffffff;
font-weight: bold;
}
.white-space-word-wrap {
width: 200px; /* This will restrict the text */
}
p {
/*white-space: nowrap;*/
word-wrap: break-word;
}

Web Browser Support

All modern web browsers support CSS white-space property.

Conclusion

At this stage, you’ve learned a lot about CSS white-space, and when you can use it. Here is a summary of everything that you’ve learned in the article:

You can use CSS white-space to control the white space in your text
CSS white-space property accepts values such as nowrap, pre, pre-wrap, pre-line, and break-spaces
You can use CSS white-space to create a typing animation. Also, you can use it to insert line breaks in HTML definition lists
CSS white-space is different from word-wrap; CSS white-space controls whitespace, whereas word-wrap will break an unbreakable string into a new line
CSS white-space works in Internet Explorer eight and above

CSS white-space gives you more control over the whitespace in your text. Now that you know everything there is to know about it, you are all prepared to handle any whitespace insertions on your web pages.

Author
Recent Posts

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

Источник

Here I come with the quick new article about some useful CSS Property which might confuse you when you are going to use.so Let’s understand and clear CSS Properties as follows:

CSS3 has property on text effects like CSS3 Text-Shadow, Text-overflow describes the text-shadow, text annotation usage.Today You will learn the CSS3 property which is used to wrap long text and for that word-wrap is used while CSS also support word-break and white-space to introduce two properties put together because these properties often confused you and you’re not sure what areas need to use the word-wrap property, when you should use word-break property, even when can use white-Space .To answer all questions, today I will put them together in this article with the example.

Here,take a look at what word-wrap property is and then how to use in practice,I will start with the syntax and then step by step check the examples to deepen understanding of word-wrap and other properties.

The word-wrap property is used to break the long words and wrap it to the next line.First You check the syntax of word-wrap with parameter description

SYNTAX:

Word—wrap: normal | break —word

Parameters Description:

normal is the default value and it is normal continuous text without wraps.
break-word is break the content within the borders of wrap.It is not like english word wrap to truncate the word, to cut off the english word wrap css provide to use word-break.

Word-break

SYNTAX:

EXAMPLE:

Word-wrap is normal effect and text are wider than the width of the box when the box stretched out.It is normal when setting its value overrides the value of it’s previously established.

This property makes long text does not wrap box bursting extend to the outside, if your design requires the element content does not wrap effect, you can use keep-all to achieve. In other words, it is best to wrap the line and should not be within the word wrap, so that the best way is to use break-word.

Compatible browsers

Firefox and Opera browsers do not support the two word-break property.When more than one word-wrap: break-word property is used with the pre and table tag does not wrap in Firefox and opera.

white-space

white—Space : normal | nowrap | pre—Line | pre—wrap | inherit

Parameter Description

normal: Its a default parameter. The space will be ignored by browsers often can be restored to default values by setting its values.
pre: The space will be retained by the browser, their behavior is similar to HTML in the pre tag.
nowrap: The text does not wrap on the same line until it came to a new line tag
So far.
pre-line: To merge whitespace sequences but retain the line breaks. This property does not support IE7, Firefox30, Opera9.2 next to the version of the browser
pre-wrap: To leave blank character sequence but normally wrap this attribute value unsupported technology IE7, Firefox3 version of the browser
inherit: It should inherit the white-space property value from the parent element and the value of this property is not supported in all versions of IE.

Word-wrap and break-word are created no effect in the table so to resolve this issue and to support this property, add the following properties in table:

table { table—layout : fixed; width : 150 px; / * Set the table width * / }

That’s it.I have explained about word-wrap,word-break and white-space CSS property here. If you have any query or comment, please contact us via the comment section.

Источник

Интерактивный пример

Сводка

Синтаксис

Значения

Формальный синтаксис

Примеры

Основной пример

Перенос строк внутри элементов <pre>

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

Браузерная совместимость

Свойство white-space

Свойство word-wrap

Свойство word-break

Свойство hyphens

Possible Values for CSS White-space

– Normal

– Nowrap

– Pre

– Pre-wrap

– Pre-line

– Break-spaces

Summary of CSS White-space values

Possible Uses

– Insert Line Breaks in Definition Lists

– Typing Animation

When Things Go Wrong

– White-space: Pre Not Working as Expected

– White-space Pre-wrap Not Working in Internet Explorer

– White-space Nowrap With Ellipse

CSS White-space vs Word-wrap

Web Browser Support

Conclusion

Word-break

white-space

Перенос строк внутри элементов `<pre>`