Force line-breaks within words

Community resources Webflow Tips
1

In cases when you have long words with lots of characters and without spaces or dashes in between, your text may cut off, or it may flow beyond the parent element’s edges and maybe even push other, neighboring elements away to make room – which becomes more apparent in mobile.
I run into that issue when dealing with an e-commerce website where the client had a unique way to name products with rather long code-names. See screenshot below.

WF_forced_wordBreak
WF_forced_wordBreak2000×723 169 KB

I didn’t want for the client to have to manually add breaks in the CMS. And I wanted to have a solution that is somewhat automated and for it to work on different devices and browsers.
I found solutions here in the WF forum and elsewhere.

This is what I ended up with:

<style>
.word-break-all {
  /* Force line break within words to prevent text from overflowing */
  	word-break: break-all; 
  /* Force line break if entire word cannot be placed on its own line without overflowing */
	word-wrap: break-word; 
	overflow-wrap: break-word;
  /* Add hyphens when break within word */
  	hyphens: auto;
  /* Same as above for various browsers */
	-ms-hyphens: auto; 
	-moz-hyphens: auto; 
	-webkit-hyphens: auto; 
  }
</style>

(The /* … */ text just explains what each code string does)

I copied that code in the Footer Code (before tag) in my project settings as I wanted to have site-wide access to the class. Of course you can also paste it into your page settings code if you just need it on that particular page.

In the designer, I added “word-break-all” (or whatever you want to name it) as a class or combo-class to the respective text elements on the page(s).

I’m still a novice at WF and not very fluent with code. If you see flaws, mistakes or room for improvements, please feel free to add to the code, tweak or correct as you see fit, and post your improved method here.

In case you care, here are all the CSS values according to W3:
normal – Default value. Uses default line break rules
break-all – To prevent overflow, word may be broken at any character
keep-all – Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as value normal
break-word – To prevent overflow, word may be broken at arbitrary points
initial – Sets this property to its default value. Read about initial
inherit – Inherits this property from its parent element. Read about inherit

4 Likes