Css label no wrap

text-wrap

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The text-wrap CSS property controls how text inside an element is wrapped. The different values provide:

• Typographic improvements, for example more balanced line lengths across broken headings
• A way to turn text wrapping off completely.

Note: The white-space-collapse and text-wrap properties can be declared together using the white-space shorthand property.

Syntax

/* Keyword values */ text-wrap: wrap; text-wrap: nowrap; text-wrap: balance; /* Global values */ text-wrap: inherit; text-wrap: initial; text-wrap: revert; text-wrap: revert-layer; text-wrap: unset; 

The text-wrap property is specified as a single keyword chosen from the list of values below.

Values

Text is wrapped across lines at appropriate characters (for example spaces, in languages like English that use space separators) to minimize overflow. This is the default value.

Text does not wrap across lines. It will overflow its containing element rather than breaking onto a new line.

Text is wrapped in a way that best balances the number of characters on each line, enhancing layout quality and legibility. Because counting characters and balancing them across multiple lines is computationally expensive, this value is only supported for blocks of text spanning a limited number of lines (the Chromium implementation uses four wrapped lines or less), meaning that it is useful for cases such as headings or pull quotes.

Formal definition

Formal syntax

text-wrap =
wrap |
nowrap |
balance |
stable |
pretty

Examples

Basic text wrap value comparison

HTML

h2 class="wrap" contenteditable="true"> The default behavior; the text in the heading wraps "normally" h2> h2 class="nowrap" contenteditable="true"> In this case the text in the heading doesn't wrap, and overflows the container h2> h2 class="balance" contenteditable="true"> In this case the text in the heading is nicely balanced across lines h2> 

CSS

.wrap  text-wrap: wrap; > .nowrap  text-wrap: nowrap; > .balance  text-wrap: balance; > h2  font-size: 2rem; font-family: sans-serif; > 

Result

The text in the example is editable. Change the text, adding long words, to view how the different line and word lengths impact wrapping.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 12, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

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 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>

Источник