Css nowrap text in div

CSS white-space Property

Demonstrate different values of the white-space property:

Definition and Usage

The white-space property specifies how white-space inside an element is handled.

Default value:	normal
Inherited:	yes
Animatable:	no. Read about animatable
Version:	CSS1
JavaScript syntax:	object.style.whiteSpace=»nowrap» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

Value	Description	Demo
normal	Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default	Demo ❯
nowrap	Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a tag is encountered	Demo ❯
pre	Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the tag in HTML	Demo ❯
pre-line	Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks	Demo ❯
pre-wrap	Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Источник

white-space

The white-space CSS property sets how white space inside an element is handled.

Try it

The property specifies two things:

Note: To make words break within themselves, use overflow-wrap , word-break , or hyphens instead.

Syntax

/* Single keyword values */ white-space: normal; white-space: nowrap; white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: break-spaces; /* white-space-collapse and text-wrap shorthand values */ white-space: collapse balance; white-space: preserve nowrap; /* Global values */ white-space: inherit; white-space: initial; white-space: revert; white-space: revert-layer; white-space: unset; 

Values

white-space property values can be specified as a single keyword chosen from the list of values below, or two values representing shorthand for the white-space-collapse and text-wrap properties.

Sequences of white space are collapsed. Newline characters in the source are handled the same as other white space. Lines are broken as necessary to fill line boxes.

Collapses white space as for normal , but suppresses line breaks (text wrapping) within the source.

Sequences of white space are preserved. Lines are only broken at newline characters in the source and at elements.

Sequences of white space are preserved. Lines are broken at newline characters, at , and as necessary to fill line boxes.

Sequences of white space are collapsed. Lines are broken at newline characters, at , and as necessary to fill line boxes.

The behavior is identical to that of pre-wrap , except that:

• Any sequence of preserved white space always takes up space, including at the end of the line.
• A line-breaking opportunity exists after every preserved white space character, including between white space characters.
• Such preserved spaces take up space and do not hang, thus affecting the box’s intrinsic sizes ( min-content size and max-content size).

The following table summarizes the behavior of the various white-space keyword values:

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

Note: There is a distinction made between spaces and other space separators. These are defined as follows:

Spaces (U+0020), tabs (U+0009), and segment breaks (such as newlines).

All other space separators defined in Unicode, other than those already defined as spaces.

Where white space is said to hang, this can affect the size of the box when measured for intrinsic sizing.

Collapsing of white space

Formal definition

Formal syntax

white-space =
normal |
pre |
nowrap |
pre-wrap |
break-spaces |
pre-line

Examples

Basic example

Line breaks inside elements

In action

div id="css-code" class="box"> p < white-space: select> option>normaloption> option>nowrapoption> option>preoption> option>pre-wrapoption> option>pre-lineoption> option>break-spacesoption> option>preserve nowrapoption> select> > div> div id="results" class="box"> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. p> div> 

.box  width: 300px; padding: 16px; > #css-code  background-color: rgb(220, 220, 220); font-size: 16px; font-family: monospace; > #css-code select  font-family: inherit; > #results  background-color: rgb(230, 230, 230); overflow-x: scroll; white-space: normal; font-size: 14px; > 

const select = document.querySelector("#css-code select"); const results = document.querySelector("#results p"); select.addEventListener("change", (e) =>  results.setAttribute("style", `white-space: $e.target.value>`); >); 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Источник

How Not to Wrap the Contents of

, , and Elements

You can make the contents of HTML , , and elements not to wrap by using some CSS. You need the white-space property. As we know, this property helps us to handle the spaces within the element.

So, if you want not to wrap the contents of the elements mentioned above, you need to use the “nowrap” value of the white-space property.

Example of making the content of the

element not to wrap:

html> html> head> title>Title of the document title> style> p < white-space: nowrap; > style> head> body> h1>White-space property example h1> p> Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. p> body> html>

Result

Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.

In the following example, in the same way, we make the content of the element not to wrap. Also, we’ll add a border.

Example of making the content of the element not to wrap:

html> html> head> title>Title of the document title> style> div < white-space: nowrap; border: 1px solid green; > style> head> body> h1>White-space property example h1> div> Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. div> body> html>

In our last example, we’ll make the content of the element not to wrap, again with the white-space property. We’ll set the display of the to “block”, then, specify its width and border.

Example of making the content of the element not to wrap:

html> html> head> title>Title of the document title> style> span < display: block; width: 250px; border: 1px solid purple; overflow: hidden; white-space: nowrap; > style> head> body> h1>White-space property example h1> span> Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. span> body> html>

Here, we also specified the overflow property with the “hidden” value, which allowed us to clip the content so as to fit the box.

Источник

How to Disable Word Wrapping in HTML

In this snippet, we’re going to demonstrate how you can disable word wrapping in HTML. Actually, this can be done with a few steps using some CSS properties.

To prevent the text from wrapping, you can use the CSS white-space property with the “nowrap” or “pre” value. In this snippet, you can see examples with both of them.

Create HTML

h2>Example h2> div> Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. div>

Add CSS

Example of disabling word wrapping with the “nowrap” value of the white-space property:

html> html> head> title>Title of the document title> style> div < white-space: nowrap; border: 1px solid #cccccc; > style> head> body> h2>Example h2> div> Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. div> body> html>

Result

Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.

Example of disabling word wrapping with the “pre” value of the white-space property:

html> html> head> title>Title of the document title> style> div < white-space: pre; > style> head> body> h2>Example h2> div> Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. div> body> html>

Источник