How can I break long URLs into two lines on mobile view?

Technical Q&A
1

Hi,

I am using the default dawn theme of Shopify and I am facing this problem.
At the bottom of a blog post, we have references to research papers and journals which have long URL like
https://www.ncbi.nlm.nih.gov/pmc/articles/PMC314434234234234324234234243892/
Now when we post it as it is at the bottom of the article and publish the article then on mobile the page scrolls from left to right outside margin.

How can we break this URL into 2 lines automatically so that it doesn’t cause the page to shift from left to right when viewed on mobile?

2

Use:

word-break: break-all;