Streaming live at 10am (PST)

How to insert text linebreak on different breakpoint


#1

Hi all,

As the title said, how to insert linebreak on specific breakpoint only?
This what I try to achieve:

I like to do linebreak on Mobile Devices only.
If I press enter to the mobile devices, the desktop and tablet breakpoint will be affected as well. How to prevent this from happening?

Thank you


#2

Insert two different text elements, set display to inline.

On mobile, set display to block.


#3

Ah I see, Thank you samliew!


#4

@yuan For what it’s worth… I just had to do this myself, but there’s a slightllllly different way to do this… to be transparent, I’m not certain one way is better than the other. This is just my preference.
In in terms of semantics, if you’re using a heading tag, it effectively let’s you use ONE heading tag, instead of multiple tags…
In an example of using this on an H1 tag…
Put your H1 TAG, and let’s say the text is:
“The Best Website Ever”, but you want it to break between Best and Website…

Wrap “The Best” and “Website Ever” into a span and give each span the same class.
For large screens, set it to inline-block (the default will be inline).
Then, on your chosen breakpoint, set it to block.

Voila…


#5

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.