CSS white-space Property

<div dir="ltr" style="text-align: left;" trbidi="on"> <div style="box-sizing: border-box; font-family: 'Noto Sans', sans-serif; font-size: 17px; line-height: 25.5px; margin-bottom: 20px;"> The white-space property controls how text is handled on the element it is applied to. Let's say you have HTML <em style="box-sizing: border-box;">exactly</em> like this:</div> <pre class=" language-markup" rel="HTML" style="background-color: #1d1f21; box-sizing: border-box; color: white; font-family: Menlo, Monaco, monospace; font-size: 0.8rem; margin-bottom: 20px; overflow: auto; padding: 33px 0px 0px; position: relative; tab-size: 2; word-break: normal;"><code class=" language-markup" style="background-image: none; box-sizing: border-box; display: block; font-family: Menlo, Monaco, monospace; overflow: auto; padding: 15px;"><span class="token tag" style="box-sizing: border-box; color: #ab875d;"><span class="token tag" style="box-sizing: border-box;"><span class="token punctuation" style="box-sizing: border-box;"><</span>div</span><span class="token punctuation" style="box-sizing: border-box;">></span></span> A bunch of words you see. <span class="token tag" style="box-sizing: border-box; color: #ab875d;"><span class="token tag" style="box-sizing: border-box;"><span class="token punctuation" style="box-sizing: border-box;"></</span>div</span><span class="token punctuation" style="box-sizing: border-box;">></span></span></code></pre> <div style="box-sizing: border-box; font-family: 'Noto Sans', sans-serif; font-size: 17px; line-height: 25.5px; margin-bottom: 20px;"> You've styled the div to have a set width of 100px. At a reasonable font size, that's too much text to fit in 100px. Without doing anything, the default <code style="background-color: #eeeeee; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; box-sizing: border-box; font-size: 15px; margin: 0px 3px 0px 1px; padding: 0px 5px 2px; position: relative; top: -1px;">white-space</code> value is<code style="background-color: #eeeeee; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; box-sizing: border-box; font-size: 15px; margin: 0px 3px 0px 1px; padding: 0px 5px 2px; position: relative; top: -1px;">normal</code>, and the text will wrap. See the example below  </div> <pre class=" language-css" rel="CSS" style="background-color: #1d1f21; box-sizing: border-box; color: #cd6a51; font-family: Menlo, Monaco, monospace; font-size: 0.8rem; margin-bottom: 20px; overflow: auto; padding: 33px 0px 0px; position: relative; tab-size: 2; word-break: normal;"><code class=" language-css" style="background-image: none; box-sizing: border-box; display: block; font-family: Menlo, Monaco, monospace; overflow: auto; padding: 15px;"><span class="token selector" style="box-sizing: border-box; color: #dfc48c;">div </span><span class="token punctuation" style="box-sizing: border-box; color: white;">{</span> <span class="token comment" spellcheck="true" style="box-sizing: border-box; color: #777777;">/* This is the default, you don't need to explicitly declare it unless overriding another declaration */</span> <span class="token property" style="box-sizing: border-box; color: #9b869c;">white-space</span><span class="token punctuation" style="box-sizing: border-box; color: white;">:</span> normal<span class="token punctuation" style="box-sizing: border-box; color: white;">;</span> <span class="token punctuation" style="box-sizing: border-box; color: white;">}</span></code></pre> <div style="box-sizing: border-box; font-family: 'Noto Sans', sans-serif; font-size: 17px; line-height: 25.5px; margin-bottom: 20px;"> <img alt="" class="alignnone size-full wp-image-16141" height="82" src="http://cdn.css-tricks.com/wp-content/uploads/2011/09/normal.png" style="border: 0px; box-sizing: border-box; height: auto !important; max-width: 100%;" title="normal" width="143" /></div> <div style="box-sizing: border-box; font-family: 'Noto Sans', sans-serif; font-size: 17px; line-height: 25.5px; margin-bottom: 20px;"> If you want to prevent the text from wrapping, you can apply <code style="background-color: #eeeeee; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; box-sizing: border-box; font-size: 15px; margin: 0px 3px 0px 1px; padding: 0px 5px 2px; position: relative; top: -1px;">white-space: nowrap;</code></div> <div style="box-sizing: border-box; font-family: 'Noto Sans', sans-serif; font-size: 17px; line-height: 25.5px; margin-bottom: 20px;"> <img alt="" class="alignnone size-full wp-image-16142" height="63" src="http://cdn.css-tricks.com/wp-content/uploads/2011/09/nowrap.png" style="border: 0px; box-sizing: border-box; height: auto !important; max-width: 100%;" title="nowrap" width="212" /></div> <div style="box-sizing: border-box; font-family: 'Noto Sans', sans-serif; font-size: 17px; line-height: 25.5px; margin-bottom: 20px;"> Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code). When the text renders in the browser, those line breaks appear as if they are stripped out. Also stripped out are the extra spaces on the line before the first letter. If we want to force the browser to display those line breaks and extra white space characters we can use <code style="background-color: #eeeeee; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; box-sizing: border-box; font-size: 15px; margin: 0px 3px 0px 1px; padding: 0px 5px 2px; position: relative; top: -1px;">white-space: pre;</code></div> <div style="box-sizing: border-box; font-family: 'Noto Sans', sans-serif; font-size: 17px; line-height: 25.5px; margin-bottom: 20px;"> <img alt="" class="alignnone size-full wp-image-16143" height="97" src="http://cdn.css-tricks.com/wp-content/uploads/2011/09/pre.png" style="border: 0px; box-sizing: border-box; height: auto !important; max-width: 100%;" title="pre" width="290" /></div> <div style="box-sizing: border-box; font-family: 'Noto Sans', sans-serif; font-size: 17px; line-height: 25.5px; margin-bottom: 20px;"> It's called <code style="background-color: #eeeeee; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; box-sizing: border-box; font-size: 15px; margin: 0px 3px 0px 1px; padding: 0px 5px 2px; position: relative; top: -1px;">pre</code> because the behavior is that as if you had wrapped the text in <code style="background-color: #eeeeee; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; box-sizing: border-box; font-size: 15px; margin: 0px 3px 0px 1px; padding: 0px 5px 2px; position: relative; top: -1px;"><pre></pre></code> tags (which by default handle white space and line breaks that way). White space is honored exactly as it is in the HTML and the text does not wrap until a line break is present in the code. This is particularly useful when literally displaying code, which benefits aesthetically from some formatting (and some time is absolutely crucial, as in white space dependent languages!)</div> <div style="box-sizing: border-box; font-family: 'Noto Sans', sans-serif; font-size: 17px; line-height: 25.5px; margin-bottom: 20px;"> Perhaps you like how <code style="background-color: #eeeeee; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; box-sizing: border-box; font-size: 15px; margin: 0px 3px 0px 1px; padding: 0px 5px 2px; position: relative; top: -1px;">pre</code> honors white space and breaks, but you need the text to wrap instead of potentially break out of its parent container. That's what <code style="background-color: #eeeeee; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; box-sizing: border-box; font-size: 15px; margin: 0px 3px 0px 1px; padding: 0px 5px 2px; position: relative; top: -1px;">white-space: pre-wrap;</code> is for:</div> <div style="box-sizing: border-box; font-family: 'Noto Sans', sans-serif; font-size: 17px; line-height: 25.5px; margin-bottom: 20px;"> <img alt="" class="alignnone size-full wp-image-16144" height="132" src="http://cdn.css-tricks.com/wp-content/uploads/2011/09/pre-wrap.png" style="border: 0px; box-sizing: border-box; height: auto !important; max-width: 100%;" title="pre-wrap" width="140" /></div> <div style="box-sizing: border-box; font-family: 'Noto Sans', sans-serif; font-size: 17px; line-height: 25.5px; margin-bottom: 20px;"> Finally, <code style="background-color: #eeeeee; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; box-sizing: border-box; font-size: 15px; margin: 0px 3px 0px 1px; padding: 0px 5px 2px; position: relative; top: -1px;">white-space: pre-line;</code> will break lines where they break in code, but extra white space is still stripped.</div> <div style="box-sizing: border-box; font-family: 'Noto Sans', sans-serif; font-size: 17px; line-height: 25.5px; margin-bottom: 20px;"> <img alt="" class="alignnone size-full wp-image-16149" height="93" src="http://cdn.css-tricks.com/wp-content/uploads/2011/09/pre-line.png" style="border: 0px; box-sizing: border-box; height: auto !important; max-width: 100%;" title="pre-line" width="146" /></div> <div style="box-sizing: border-box; font-family: 'Noto Sans', sans-serif; font-size: 17px; line-height: 25.5px; margin-bottom: 20px;"> Interestingly, the final line break is not honored. As per the <a href="http://www.w3.org/TR/CSS21/text.html#white-space-prop" style="border-bottom-color: transparent; border-bottom-style: solid; border-bottom-width: 2px; box-sizing: border-box; color: #4472b9; text-decoration: none;">CSS 2.1 spec:</a> "Lines are broken at preserved newline characters, and as necessary to fill line boxes." so perhaps that makes sense.</div> <div style="box-sizing: border-box; font-family: 'Noto Sans', sans-serif; font-size: 17px; line-height: 25.5px; margin-bottom: 20px;"> Here is a table to understand the behaviors of all the different values:</div> <table class="standard-table" style="border-collapse: collapse; border-spacing: 0px; box-sizing: border-box; color: black; font-family: 'Noto Sans', sans-serif; font-size: 17px; line-height: 25.5px; margin: 0px 0px 20px; width: 695px;"><thead style="box-sizing: border-box;"> <tr style="box-sizing: border-box;"><th style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;"> </th><th style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">New lines</th><th style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">Spaces and tabs</th><th style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">Text wrapping</th></tr> </thead><tbody style="box-sizing: border-box;"> <tr style="box-sizing: border-box;"><th style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">normal</th><td style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">Collapse</td><td style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">Collapse</td><td style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">Wrap</td></tr> <tr style="box-sizing: border-box;"><th style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">pre</th><td style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">Preserve</td><td style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">Preserve</td><td style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">No wrap</td></tr> <tr style="box-sizing: border-box;"><th style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">nowrap</th><td style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">Collapse</td><td style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">Collapse</td><td style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">No wrap</td></tr> <tr style="box-sizing: border-box;"><th style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">pre-wrap</th><td style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">Preserve</td><td style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">Preserve</td><td style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">Wrap</td></tr> <tr style="box-sizing: border-box;"><th style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">pre-line</th><td style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">Preserve</td><td style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">Collapse</td><td style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">Wrap</td></tr> </tbody></table> <div style="box-sizing: border-box; font-family: 'Noto Sans', sans-serif; font-size: 17px; line-height: 25.5px; margin-bottom: 20px;"> <a href="http://dev.w3.org/csswg/css3-text/#white-space" style="border-bottom-color: transparent; border-bottom-style: solid; border-bottom-width: 2px; box-sizing: border-box; color: #4472b9; text-decoration: none;">In CSS3</a>, the <code style="background-color: #eeeeee; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; box-sizing: border-box; font-size: 15px; margin: 0px 3px 0px 1px; padding: 0px 5px 2px; position: relative; top: -1px;">white-space</code> property is literally going to follow that chart and map the properties to <code style="background-color: #eeeeee; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; box-sizing: border-box; font-size: 15px; margin: 0px 3px 0px 1px; padding: 0px 5px 2px; position: relative; top: -1px;">text-space-collapse</code> and <code style="background-color: #eeeeee; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; box-sizing: border-box; font-size: 15px; margin: 0px 3px 0px 1px; padding: 0px 5px 2px; position: relative; top: -1px;">text-wrap</code> accordingly.</div> <h3 id="browser-support" style="box-sizing: border-box; font-family: 'Gotham Rounded A', 'Gotham Rounded B', sans-serif; font-size: 2rem; font-weight: 500; line-height: 1.1; margin: 50px 0px 10px; padding: 0px;"> Browser Support</h3> <div style="box-sizing: border-box; font-family: 'Noto Sans', sans-serif; font-size: 17px; line-height: 25.5px; margin-bottom: 20px;"> Little more complex than the regular support table, since each value has different levels of support:</div> <table class="standard-table" style="border-collapse: collapse; border-spacing: 0px; box-sizing: border-box; color: black; font-family: 'Noto Sans', sans-serif; font-size: 17px; line-height: 25.5px; margin: 0px 0px 20px; width: 695px;"><tbody style="box-sizing: border-box;"> <tr style="box-sizing: border-box;"><th style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">Browser</th><th style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">Version</th><th style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">Support of</th></tr> <tr style="box-sizing: border-box;"><td rowspan="3" style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">Internet Explorer</td><td style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">5.5</td><td style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;"><code style="background-color: #eeeeee; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; box-sizing: border-box; font-size: 15px; margin: 0px 3px 0px 1px; padding: 0px 5px 2px; position: relative; top: -1px;">normal | nowrap</code></td></tr> <tr style="box-sizing: border-box;"><td style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">6.0</td><td style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;"><code style="background-color: #eeeeee; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; box-sizing: border-box; font-size: 15px; margin: 0px 3px 0px 1px; padding: 0px 5px 2px; position: relative; top: -1px;">normal | pre | nowrap</code></td></tr> <tr style="box-sizing: border-box;"><td style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">8+</td><td style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;"><code style="background-color: #eeeeee; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; box-sizing: border-box; font-size: 15px; margin: 0px 3px 0px 1px; padding: 0px 5px 2px; position: relative; top: -1px;">normal | pre | nowrap | pre-wrap | pre-line</code></td></tr> <tr style="border-top-color: silver; border-top-style: solid; border-top-width: 2px; box-sizing: border-box;"><td rowspan="3" style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">Firefox (Gecko)</td><td style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">1.0 (1.0)</td><td style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;"><code style="background-color: #eeeeee; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; box-sizing: border-box; font-size: 15px; margin: 0px 3px 0px 1px; padding: 0px 5px 2px; position: relative; top: -1px;">normal | pre | nowrap | -moz-pre-wrap</code></td></tr> <tr style="box-sizing: border-box;"><td style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">3.0 (1.9)</td><td style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;"><code style="background-color: #eeeeee; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; box-sizing: border-box; font-size: 15px; margin: 0px 3px 0px 1px; padding: 0px 5px 2px; position: relative; top: -1px;">normal | pre | nowrap | pre-wrap | -moz-pre-wrap</code></td></tr> <tr style="box-sizing: border-box;"><td style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">3.5 (1.9.1)</td><td style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;"><code style="background-color: #eeeeee; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; box-sizing: border-box; font-size: 15px; margin: 0px 3px 0px 1px; padding: 0px 5px 2px; position: relative; top: -1px;">normal | pre | nowrap | pre-wrap | pre-line</code></td></tr> <tr style="border-top-color: silver; border-top-style: solid; border-top-width: 2px; box-sizing: border-box;"><td rowspan="3" style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">Opera</td><td style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">4.0</td><td style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;"><code style="background-color: #eeeeee; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; box-sizing: border-box; font-size: 15px; margin: 0px 3px 0px 1px; padding: 0px 5px 2px; position: relative; top: -1px;">normal | pre | nowrap</code></td></tr> <tr style="box-sizing: border-box;"><td style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">8.0</td><td style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;"><code style="background-color: #eeeeee; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; box-sizing: border-box; font-size: 15px; margin: 0px 3px 0px 1px; padding: 0px 5px 2px; position: relative; top: -1px;">normal | pre | nowrap | pre-wrap</code></td></tr> <tr style="box-sizing: border-box;"><td style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">9.5</td><td style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;"><code style="background-color: #eeeeee; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; box-sizing: border-box; font-size: 15px; margin: 0px 3px 0px 1px; padding: 0px 5px 2px; position: relative; top: -1px;">normal | pre | nowrap | pre-wrap | pre-line</code></td></tr> <tr style="border-top-color: silver; border-top-style: solid; border-top-width: 2px; box-sizing: border-box;"><td rowspan="2" style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">Safari (WebKit)</td><td style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">1.0 (85)</td><td style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;"><code style="background-color: #eeeeee; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; box-sizing: border-box; font-size: 15px; margin: 0px 3px 0px 1px; padding: 0px 5px 2px; position: relative; top: -1px;">normal | pre | nowrap</code></td></tr> <tr style="box-sizing: border-box;"><td style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;">3.0 (522)</td><td style="border: 2px solid rgb(204, 204, 204); box-sizing: border-box; padding: 5px;"><code style="background-color: #eeeeee; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; box-sizing: border-box; font-size: 15px; margin: 0px 3px 0px 1px; padding: 0px 5px 2px; position: relative; top: -1px;">normal | pre | nowrap | pre-wrap | pre-line</code></td></tr> </tbody></table> </div>

CSS white-space Property

The white-space property controls how text is handled on the element it is applied to. Let's say you have HTML  exactly  like this: ...

+ Read more »