Html word wrap white space

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.

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.

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