The Most Under-Valued CSS Rule to Improve UX
The Single Most Easiest Way to Improve User Experience on Mobile layout
On your mobile layout there is naturally usually a limited amount of space to present your content to visitors. Here is a single CSS rule that will improve your site quality cunningly when enabled.
Meet overflow-wrap: break-word;
*Fanfares playing* The CSS rule is:
html {
overflow-wrap: break-word;
}
The overflow-wrap property makes it possible to define that the visitor’s browser should break a line of text on the targeted element onto multiple lines even in otherwise not breakable place.
It is wise to set the property on html or body element since this way it automatically affects all aspects of your layout.
So, when you set this rule on long words such as BoogieWoogieReggaePartyRockNRollMan will be cut and forced to have a line break when the text is too big for its container and would overflow.
Demonstration
These pics demonstrate the problem and the solution of using overflow-wrap break-word.
First there is no break-word value set which is usually left this way by developers on default. Finally overflow-wrap: break-word is active and the extra long word is forced to line break on the limits.
Enchance User Experience Fast N’ Easy
So be sure to toggle this rule on on your site’s mobile layout to improve the user experience in an easy and fast way. The property described in this article is probably one of the most undervalued CSS rule that exists.
Cheers!
