Css style new line

line-break

The line-break CSS property sets how to break lines of Chinese, Japanese, or Korean (CJK) text when working with punctuation and symbols.

Try it

Syntax

/* Keyword values */ line-break: auto; line-break: loose; line-break: normal; line-break: strict; line-break: anywhere; /* Global values */ line-break: inherit; line-break: initial; line-break: revert; line-break: revert-layer; line-break: unset; 

Values

Break text using the default line break rule.

Break text using the least restrictive line break rule. Typically used for short lines, such as in newspapers.

Break text using the most common line break rule.

Break text using the most stringent line break rule.

There is a soft wrap opportunity around every typographic character unit, including around any punctuation character or preserved white spaces, or in the middle of words, disregarding any prohibition against line breaks, even those introduced by characters with the GL, WJ, or ZWJ character class or mandated by the word-break property. The different wrapping opportunities must not be prioritized. Hyphenation is not applied.

Formal definition

Formal syntax

line-break =
auto |
loose |
normal |
strict |
anywhere

Examples

Setting text wrapping

See whether the text is wrapped before «々», «ぁ» and «。».

HTML

div lang="ja"> p class="wrapbox auto"> auto:br />そこは湖のほとりで木々が輝いていた。br />その景色に、美しいなぁと思わずつぶやいた。 p> p class="wrapbox loose"> loose:br />そこは湖のほとりで木々が輝いていた。br />その景色に、美しいなぁと思わずつぶやいた。 p> p class="wrapbox normal"> normal:br />そこは湖のほとりで木々が輝いていた。br />その景色に、美しいなぁと思わずつぶやいた。 p> p class="wrapbox strict"> strict:br />そこは湖のほとりで木々が輝いていた。br />その景色に、美しいなぁと思わずつぶやいた。 p> p class="wrapbox anywhere"> anywhere:br />そこは湖のほとりで木々が輝いていた。br />その景色に、美しいなぁと思わずつぶやいた。 p> div> 

CSS

.wrapbox  width: 10em; margin: 0.5em; white-space: normal; vertical-align: top; display: inline-block; > .auto  line-break: auto; > .loose  line-break: loose; > .normal  line-break: normal; > .strict  line-break: strict; > .anywhere  line-break: anywhere; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

Found a content problem with this page?

This page was last modified on Feb 21, 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.

Источник

Learn about CSS Line Break

The CSS line-break property specifies how to enforce constraints for text wrapping on new lines when working with symbols and punctuation in Chinese, Japanese, or Korean (CJK) writing systems. The css line break property enables us to create breakpoints on our webpages without using the HTML
element.

Why Should I Break Line in CSS?

We need to break lines in CSS because this reduces the reliance on many
tags in our HTML document and improves the code readability. Additionally, it enables us to improve the readability of the text on our web pages, enhancing the user experience.

Information to Know Before Using It

The majority of CSS for line breaks requires minor changes to our HTML content. These changes could take the form of additional markup or a carriage return. We can modify the additional markup in CSS to create the necessary breakpoint. We can use a few CSS white-space values for the carriage return to preserve it on the website.

How To Add a New Line in CSS

We need to employ some methods to add a new line in CSS. Let’s discuss a few of them :

Using ::after to Insert a Line-break

To add a line-break using only CSS, we need to employ the pseudo-class ::after or ::before . In the stylesheet, we can use these pseudo-classes, with the HTML class or id , before or after the place where we want to insert a line break.

• We will set the content property to the new-line character /a .
• We will set the white-space property to pre , which prompts the browser to read every white space in content1 as white space.
• The white-space property inserts a line break before an element and controls the text-wrapping and white spacing.

Using ::before to Insert a Line-break

• This method works the same as the previous one.
• It adds a line break before the specified id and class.
• Here we will add a line break before the second line. Therefore, we will use the #content2 id.

CSS Content Property With Zero Font Size

Using the CSS Content Property with Zero Font Size requires us to enclose some HTML content with extra markup. We can use the HTML tag for the extra markup.The CSS manipulates the tag via a pseudo-element. This manipulation causes a CSS content line break, as shown below:

Carriage Return and Display Block

When using a carriage return and display block, it is necessary to include additional markup around the region where the breakpoint is needed. Using a CSS pseudo-element, we can manipulate the additional markup in CSS.

• We will use the ::before pseudo-element.
• We will add a carriage return character \a to the content.
• Then, we will set the display property to block .

Note: The display property is set to the block-level value because block elements start on a new line, filling the whole available width.

Carriage Return and White Space Pre

This method works the same as the above technique, but the white space pre only preserves the carriage return on the web page, forcing a line break CSS effect.

Break it in HTML, Preserve it in CSS

In this technique, we add a breakpoint in the HTML markup and preserve the breakpoint with a white space pre-line in CSS. This method enables us to add a line break in CSS before an element without using the pseudo-elements.

Note: We only set the white-space property to the pre-line value for the

element.

Break With Flexbox Direction

We can wrap the necessary breakpoint in our HTML with extra markup. Then, in our CSS, we will do the following:

This method causes all the flex items to stack on top of each other, creating a CSS paragraph break.

Display Block on CSS Before Pseudo Element

• We will use the CSS content property and specify its content as an empty string.
• Then, we will change the ::before pseudo-element to a block-level element.

Display Table

We will set the CSS display property to a table for the breakpoints. Since the table is a block-level element, it will cause a line break.

Browser Support

All modern web browsers support the methods and the css line break property discussed in this article.

Browser	Version
Google Chrome	58
Safari	11
Mozilla Firefox	69
Microsoft Edge	14
Opera	45
Chrome Android	58
Firefox for Android	79
Opera Android	43
Safari on iOS	11
Samsung Internet	7.0
WebView Android	58

Conclusion

• CSS line-break property enables us to create breakpoints on our webpages without using the HTML
  element.
• The css line break property improves the text readability on our web pages.
• The majority of CSS for line breaks requires minor changes to our HTML content. We can modify the additional markup in CSS to create the necessary breakpoint.
• We can style the markup with a pseudo-element to create a line break.
• We can also use methods like the flexbox direction and display table to cause a line break.

Источник

How to Add a Line-Break to an HTML Element Using CSS Only?

In this post, we’ll explore various ways to create a line-break in our content using only CSS.

Line-Break Between Lines of Text

We can display the line-breaks in text without adding any extra mark-up by using the white-space CSS property, with any one of the following values:

white-space:	New lines	Spaces & tabs	Text wrapping
pre	Preserve	Preserve	No wrap
pre-wrap	Preserve	Preserve	Wrap
pre-line	Preserve	Collapse	Wrap

Using either of these properties would make the element act like a element (which preserves newlines), for example:

  
Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Mauris eget pellentesque lacus.
 

This does not work in IE-7 and below.

Line-break Between HTML Elements

Block-level elements by default start on a new line (unless the default behavior is overridden by a CSS rule). To force inline elements to a new line, however, you could do any of the following:

Set display: block; on the element:

Use the carriage return character ( \A ) as content in pseudo-element:

  
Lorem ipsum dolor sit amet.Consectetur adipiscing elit. 
 

Hope you found this post useful. It was published 15 May, 2018 (and was last revised 03 Jun, 2020 ). Please show your love and support by sharing this post.

Источник

How to Break Line Without Using
Tag in CSS

There are a few ways to break a line without using a tag. For that, we can use block-level elements.

Block-level elements start on a new line by default (if a CSS rule does not override the default behavior). Here, you can find how to make inline elements start on a new line.

In this snippet, we’ll use the following properties:

Let’s see how to break a line using the white-space property. This property specifies how the white space within an element must be handled. A white space can be a space sequence or a line break.

Create HTML

h1>W3Docs h1> div> Example Example div>

Add CSS

• Use the text-align property set to “center” for the element.
• Add color to .
• Use the white-space property set to “pre” for the element.

body < text-align: center; > h1 < color: #000000; > div < white-space: pre; >

Let’s see the result of our code.

Example of breaking a line using the white-space property:

html> html> head> title>Title of the document title> style> body < text-align: center; > h1 < color: #000000; > div < white-space: pre; > style> head> body> h1>W3Docs h1> div> Example Example div> body> html>

Result

W3Docs

Next, we’ll show how to break a line with the display property. We need to set display: block to represent an element as a block element. In the following example, we set display: block to the element which is inside a element.

Example of breaking a line using the display property:

html> html> head> title>Title of the document title> style> body < text-align: center; > h1 < color: #000000; > p span < display: block; > style> head> body> h1> W3Docs h1> p> span>Example_1 span> span>Example_2 span> p> body> html>

Also, you can use the carriage return character (\A) as content in pseudo-element.

It is possible to add a new line using ::before and ::after pseudo-elements.

Example of breaking a line using the ::after pseudo-element:

html> html> head> title>Title of the document title> style> .line:after < content: '\A'; white-space: pre; > style> head> body> h3> span class="line">This is the first line span> span class="secondary-label">second line span> h3> body> html>

Источник