CODEWITHSUNDEEP
htmlcssstring
jamacoe
jamacoe

Reputation: 549

How to priorize / change order of string breaking / wrapping to next line in HTML / CSS

Consider this string:

"Word1 Word2 Word3"

As the screen width gets narrower, it will break first after "Word2" and 2nd before "Word2". I want these breaks to be swapped. The string should break 1st before Word2 and 2nd after "Word2":

First breaking:

Word1
Word2 Word3

(if it was only this, I could place a   between Word2 and Word3, but ...)

2nd breaking:

Word1
Word2
Word3

Upvotes: 1

Views: 33

Answers (1)

Millhorn
Millhorn

Reputation: 3166

I'd recommend using the pseudo-class ::after and employing:

content: '\a';
white-space: pre;

...in your CSS.

Here's an example:

At a max-width of 350px, you'll see your content as:

Word1
Word2
Word3

Once it reaches 400px, it will go to:

Word1
Word2 Word3

Beyond that, you'll see:

Word1 Word2 Word3


@media screen and (max-width: 400px) {
  span:nth-child(1)::after {
    content: '\a';
    white-space: pre;
  }
}

@media screen and (max-width: 350px) {
  span:nth-child(2)::after {
    content: '\a';
    white-space: pre;
  }
}
<span>Word1</span>
<span>Word2</span>
<span>Word3</span>

Upvotes: 1

Related Questions