Breaking the line css

Breaking to a new line with inline-block?

I want to remove the
‘s and do the break lines through CSS. If I change the spans to display:block the width will go 100% and I need the width to be exactly the length of the text, like it is now. Any suggestions?

 
 
We 
build 
the 
Internet 
 
 .text span < background:rgba(165, 220, 79, 0.8); display:inline-block; padding:7px 10px; color:white; >.fullscreen .large

7 Answers 7

Remove all br tags and use display: table .

.text span < background: rgba(165, 220, 79, 0.8); display: table; padding: 7px 10px; color: white; >.fullscreen .large

Explanation: The table wraps the width of its content by default without setting a width, but is still a block level element. You can get the same behavior by setting a width to other block-level elements:

Like a default table. null 

Notice the element doesn’t flow inline with the like it would normally. Check it out with the computed styles in your dev tools. You’ll see pseudo margin to the right of the . Anyway, this is the same as the table, but the table has the added benefit of always forming to the width of its content.

I think this answer is more relevant than the accepted answer. display: table acts as an inline-block element by being as wide as the content it contains, but also acts as a block element by adding a line break before AND after the element. Floats do not add a line break after the element.

display: table; carries behavior beyond line breaking that will probably break some css. I know height and width will not work

use float: left; and clear: left;

because inline-block won’t let the OP achieve what he wants, float:left still does what he was using inline-block for (make the element wrap the text instead of going full width). I could have left display: inline-block but float: left also invisibly sets display to block, a cleaner code is better than cluttered. I presume you didn’t know this, reason why you decided to downvote. After all, my answer is one possible right answer (I’m sure there are other ways to achieve that), and does not cater for google indexing.

any floating sets to display: block. That’s why I think that using float here when asked about inline-block is misleading. The downvote was, while searching for it, this got high ranking, however was not helpful. I thought my previous comment did explain that. Sorry if it was not clear.

@hakre — that’s not quite correct. Since they’re not in the same flow as the parent anymore, the block widths collapse as if they were display:inline-block, which is really all the OP wants. This worked well for me, solving the same problem.

@Luca Might also be worth pointing out that you may need a clearfix on the parent of the spans, like .text < clear: left; overflow: auto; >.

Set the items into display: inline and use :after :

.text span < display: inline >.break-after:after

and add the class into your html spans:

I think the best way to do this as of 2018 is to use flexbox.

.text < display: flex; flex-direction: column; align-items: flex-start; >/* same as original below */ .text span < background:rgba(165, 220, 79, 0.8); display:inline-block; padding:7px 10px; color:white; >.fullscreen .large

Worked best for me. I needed to align items in left, center or right. So, I could use align-items: flex-start , align-items: center & align-items: flex-end .

Here is another solution (only relevant declarations listed):

When the margin is expressed in percentage, that percentage is taken from the width of the parent node, so 100% means as wide as the parent, which results in the next element getting «pushed» to a new line.

Not a part of the answer, but I thought some explanation would be appropriate. I wanted to style

blocks so that they had borders, were only as wide as the contents, but not wider than the parent node, and each appeared on a new line. For various reasons (I can elaborate if anyone is interested), none of the earlier solutions were satisfactory in my case, so I came up with my own. It looks good when the parent node has a limited width and overflow: visible ; otherwise it can result in an unnecesary horizontal scrollbar or empty space.

I think floats may work best for you here, if you dont want the element to occupy the whole line, float it left should work.

Note:Remove
‘s before using this off course.

If you’re OK with not using

s (only s and s), this solution might even allow you to align your inline-block s center or right, if you want to (or just keep them left, the way you originally asked for). While the solution might still work with

s, I don’t think the resulting HTML code would be quite correct, but it’s up to you anyways.

The trick is to wrap each one of your s with a corresponding . This way we’re taking advantage of the line break caused by the ‘s display: block (default), while still keeping the visual green box tight to the limits of the text (with your display: inline-block declaration).

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.27.43548

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

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.

Источник