Why does my site break up words and paragraphs on blog pages?

Shopify Discussion

Topic summary

Issue: Words and paragraphs were splitting oddly on some blog/product pages after publishing, despite looking normal in the editor. A screenshot and the site URL were provided.

Investigation: A helper asked whether content was typed or copy-pasted and considered long-word overflow. The poster shared a preview link and confirmed they usually copy/paste and then edit.

Diagnosis: The behavior was not due to long words. A CSS rule in the theme was causing the text to break incorrectly.

Fix: Add the following to Custom CSS to correct the rendering: .prose span { display: initial; }. Placing it under Theme Settings is possible, but it could affect other site areas and should be checked.

Outcome/Status: The suggested CSS change resolved the issue for the poster. The thread appears resolved, with a caution to verify broader theme impacts.

Summarized with AI on December 31. AI used: gpt-5.
1

Hi there,

Does anyone know why my site breaks up the words and paragraph on some blog pages and products as seen below. It is showing normally when I am writing the blog but doesn’t like it when I publish it.

Webiste: www.maternallyhappy.com

Thanks heaps,

Caitlin

maternallyhappy_0-1712897305577.png
maternallyhappy_0-1712897305577.png1794×970 176 KB

2

It would be nice to see the actual article where you are having this problem.

Are you typing this in or copy/pasting?

Could be something like https://community.shopify.com/post/2147629 and this “long word” can fit inside entry field in backend, but not when displayed on your site.

3

Hey Tim! Thanks for your response.

I’ve put the blog link below, it isn’t published yet so not sure if you can see it with that link.

I generally copy and paste what I have written and then make edits

https://wb6z6ygdfw526rz0-28779282491.shopifypreview.com/blogs/the-pregnancy-library/articles?preview_key=bab2daff9661da95f5adba0c22437d45

4

Yes, I can see the problem – it’s not the same as suggested above.

The theme includes a CSS rule the intended purpose of which I do not quite understand, but this rule is the reason for this behaviour.

It’s easy to fix though.

Just add the following code to the “Custom CSS” section setting:

.prose span {
  display: initial;
}

You may consider adding it to the “Custom CSS” under Theme Settings, but it may affect other areas of the site – needs further checking.

1 Like
5

Thanks Tim, that was super helpful!!

1 Like