Line break spacing html
На чтение 5 мин
Line break spacing html
white-space
The white-space property
white-space: normal | pre | nowrap | pre-wrap | break-spaces | pre-line
- Collapses sequences of spaces (or not)
- Preserves tabs and line feeds (or not)
- Allows lines to wrap (or not)
- Decides what happens to end-of-line spaces
- Applies to any element, not just blocks
Lorem ipsum. Dolor sit amet. ipsum. Dolor sit amet. consectetur ipsum. Dolor amet. consectetur ipsum. Dolor sit amet. consectetur
Lorem ipsum. Dolor sit amet. consectetur
Lorem consectetur Lorem ipsum. Dolor sit
amet.
consectetur
White-space — Phase I
White-space — Phase II
- Collapsible spaces at the start of a line are removed
- Preserved tabs shift content to the next tab stop
- Preserved line feeds push content to the next line
- Wrap the line at a wrap opportunity if more won’t fit
White-space — End of Line
- Collapsible spaces at the end of a line are removed
- white-space:pre spaces stay, overflowing if too long
- white-space:pre-wrap spaces stay, may get trimmed if overflowing
- white-space:break-spaces spaces stay, wrap if too long
white-space on Inlines
Источник
: The Line Break element
The HTML element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.
Try it
As you can see from the above example, a
element is included at each point where we want the text to break. The text after the
begins again at the start of the next line of the text block.
Note: Do not use
to create margins between paragraphs; wrap them in elements and use the CSS margin property to control their size.
Attributes
This element’s attributes include the global attributes.
Deprecated attributes
Indicates where to begin the next line after the break.
Styling with CSS
The
element has a single, well-defined purpose — to create a line break in a block of text. As such, it has no dimensions or visual output of its own, and there is very little you can do to style it.
You can set a margin on
elements themselves to increase the spacing between the lines of text in the block, but this is a bad practice — you should use the line-height property that was designed for that purpose.
Examples
Simple br
In the following example we use
elements to create line breaks between the different lines of a postal address:
br /> 331 E. Evelyn Avenuebr /> Mountain View, CAbr /> 94041br /> USAbr />
Result
Accessibility concerns
Creating separate paragraphs of text using
is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology. Screen readers may announce the presence of the element, but not any content contained within
s. This can be a confusing and frustrating experience for the person using the screen reader.
Use
elements, and use CSS properties like margin to control their spacing.
Technical summary
| Content categories | Flow content, phrasing content. |
| Permitted content | None; it is a void element. |
| Tag omission | Must have a start tag, and must not have an end tag. In XHTML documents, write this element as
. |
| Permitted parents | Any element that accepts phrasing content. |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | none , presentation |
| DOM interface | HTMLBRElement |
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 Apr 13, 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.
Источник
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.
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.
Источник