Line break in html string

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.

Источник

HTML New Line – How to Add a Line Break with the BR Tag

Dillion Megida

In this article, I’ll explain what line breaks are and show you how to create them in HTML.

What is a Line Break?

A line break, as the name implies, is a break in line 😅. A line break in HTML is a point where a line ends horizontally, and the next line starts on a new line.

In HTML, when you write a string like this:

 
Hello, I am trying to create a new line
 

The whitespaces (the tab space before «Hello», the space between «am» and «trying», «a» and «new») will be ignored. The result on the screen will appear like this:

Hello, I am trying to create a new line 

One way to fix this (though it’s not very effective) is to create three

tags like this:

Hello, I am
 
trying to create a
 
new line
 

This will result in the following:

Hello, I am trying to create a new line 

Because p tags create block elements, they occupy the entire horizontal space and the next element goes to the next line – as you can see from the result above.

This solution is not effective because you have created three paragraphs. In cases where a screen reader is to interpret this, it will read it as three paragraphs instead of a single sentence. This can affect web accessibility.

So how do you add a line break for an inline element?

How to Add a Line Break in HTML

HTML has tags for numerous purposes, including to create line breaks. You can use the br tag in HTML to add line breaks. It can go between inline elements to break the elements into multiple parts.

Here is an example of a paragraph with the br tag:

 
Hello, I am 
trying to create a 
new line
 

The br tag is a void element that doesn’t have a closing tag. Instead, it is a self-closing tag.

The above code results in this:

Hello, I am trying to create a new line 

You can use this tag for other forms of inline elements like links. For example, look at this code:

Anchor tags, a , are inline elements, so instead of the second link showing on the next line, it shows in the same line like this:

You can use the br tag between the links to break the first link line:

Conclusion

The br tag in HTML starts the next element on a new line, similar to the carriage return \n in strings.

Instead of using block elements for putting elements in new lines, you can use the line break tag: br .

In cases like sentences, using the br tag serves as a visual line break and doesn’t affect accessibility. Screen readers will read the sentence as it is without pause.

Dillion Megida

Developer Advocate and Content Creator passionate about sharing my knowledge on Tech. I simplify JavaScript / ReactJS / NodeJS / Frameworks / TypeScript / et al My YT channel: youtube.com/c/deeecode

If you read this far, tweet to the author to show them you care. Tweet a thanks

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started

freeCodeCamp is a donor-supported tax-exempt 501(c)(3) charity organization (United States Federal Tax Identification Number: 82-0779546)

Our mission: to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons — all freely available to the public. We also have thousands of freeCodeCamp study groups around the world.

Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.

Источник

HTML Line Break – How to Break a Line with the HTML
Tag

Kolade Chris

And this is how we can add line breaks to properly format our address:

 
The White House 
1600 Pennsylvania Avenue 
NW Washington, DC 
20500 
USA
 

It looks like this in the browser:

How to Add Line Breaks to Poems

Poems are conventionally written in short breaking sentences in order to create visual hierarchies and format them nicely.

So, if you want to write a poem in your HTML code, the
tag makes the formatting process easier for you.

A poem without line breaks

 
I dabbled around a lot when I decided to learn to code I went from A to Z with resources When I decided to make my own things I discovered I've been in the old all while So I remained a novice in coding But then I found freeCodeCamp I got my hands on the platform I went from novice to ninja in coding And now I'm a camper for life
 

It looks like this in the browser:

You can see the poem has no visual hierarchy, it is not formatted the right way, and so it is unreadable as a poem.

A poem with line breaks

 
I dabbled around a lot when I decided to learn to code 
I went from A to Z with resources 
When I decided to make my own things 
I discovered I've been in the old all while 
So I remained a novice in coding 
But then I found freeCodeCamp 
I got my hands on the platform 
I went from novice to ninja in coding 
And now I'm a camper for life 
 

I also changed the font size a bit in the CSS:

It now looks like this in the browser:

You can see that the poem is now more readable and formatted the right way.

Some valuable advice: Do not use the
tag to force a space between block-level elements ( p , h1 , h2 , h3 , div , etc). Instead, use the CSS margin property.

You might be wondering – since the
tag is an element, is it possible to style it?

Well, it is possible. But there’s no real practical need to style it since all it does is create a couple of white spaces.

Conclusion

I hope this tutorial has given you the background knowledge you need to use the
tag so you can make your HTML text look better.

Thank you for reading, and keep coding.

Источник

HTML Line break

The HTML Line Break tag is used to apply a line break and start your text in the new line.

In HTML, we use the
tag to create a line break. For example,

 
Use the 
br tag 
to create line breaks in text.
 

Browser Output

In the above code, if you look carefully, you can find there is no closing tag for
. It’s because the
tag is an empty tag, which means it doesn’t require a closing tag.

As you can see, the
tag adds a new line without having to create a new paragraph.

The line break is helpful for writing structured texts like addresses and poems without creating multiple paragraphs.

Line-Break vs Multiple Paragraphs

As we know, an HTML paragraph always starts on a new line, instead of a line break we can also use multiple paragraphs. For example,

Use the
 
br tag
 
to create line breaks in text.

Browser Output

We can see we have successfully applied line breaks using multiple paragraphs. However, there are several drawbacks of this approach:

• Screen readers treat each paragraph as separate sentences. That is, Use the , br tag , and to create line breaks in text. will be read as different sentences which will create confusion for users.
• Each paragraph has its own default styling, hence with multiple paragraphs, there will be unnecessary margin and padding between the lines making them not seem as continuous. You can see that in the above output as well.

Example: Line breaks using HTML
and

 
Roses are red
 
Violets are blue
 
HTML is Fun
 
and so are You!
 
Roses are red 
Violets are blue 
HTML is fun 
and so are You!
 

Browser Output

Table of Contents

Источник