How can I force a line/word to break when it exceeds the width of its parent container?
In my case it’s the product name in a collection. It pushes the whole container open on mobile and widens the whole collection item.
I just can’t figure out how to solve that. It drives me nuts and eats up way too much time.
Can somebody help?
I found a temp solution. Not a solve really.
For now I just use an empty space in the CMS for the longer names which allows them to break.
So in my case (screenshot above), where “X2XOBF.ShouSugiBan” doesn’t break and pushes other elements wide because it’s too long, I added an empty space like so: “X2XOBF. ShouSugiBan”
It ends up not being exactly centered but that’s barely visible, and it may add a spaces where you don’t want them, in cases when the whole name fits.
I still hope there’s a way to force-break words in cases like that. It just doesn’t come across super professional when you have to tell a client to manually add spaces in the CMS.
Thank you so much, spirelli!
Easy to do – and works like a charm.
I’m still relatively new to all of this so I want to help other novices like myself by sharing in more detail how I did it. For the experts among you, please feel free to correct me if there’s a better way to do this.
In Project Settings under Custom Code I added the below CSS code to Head Code – and hit Safe Changes. I then added the desired classes “word-break” or “word-wrap” to the respective Divs in Designer.
/* Force line break within words to prevent text from overflowing */
.word-break {word-break: break-all;}
/* Force line break if entire word cannot be placed on its own line without overflowing */
.word-wrap {word-wrap: break-word;}
Don’t get confused! In order to see the “word-break” magic in action you need to look at it on the published site (while Divs with the “word-wrap” class are already breaking lines in the Designer).
I haven’t tested this across all the different devices and browsers yet but will report should I discover any issues later.
Nothing more frustrating than when you get stuck with issues like this and burn precious time, while there is a simple solution for it out there. So I really really appreciate this forum and all the contributors who take the time to share their wisdom!
Thank you, thank you!
Custom CSS can also be added within an Embed element, in which case, the effects are normally also is visible in Designer. This would help you to better see what’s going on when putting a site together. The Embed element with the custom code can also be placed within a Symbol to be added and updated on every page.
