This snippet automatically inserts hyphens when breaking long words, making sure they wrap cleanly instead of overflowing. It also allows long strings like URLs to break safely, keeping layouts tidy when combined with truncation or line clamps.
Add this code with a snippets plugin in <head>, or place it in Page CSS block or Site Settings.
* {
hyphens: auto;
overflow-wrap: break-word;
}Add this code with a snippets plugin in <head>, or place it in Page CSS block or Site Settings.
h1, h2, h3, h4, h5, h6, p {
hyphens: auto;
overflow-wrap: break-word;
}Add this code with a snippets plugin in <head>, or place it in Element CSS, Page CSS block, or Site Settings. Use the .ou-auto-hyphen custom class on any element where you want hyphenation.
.ou-auto-hyphen {
hyphens: auto;
overflow-wrap: anywhere;
}Add this code inside the Custom CSS field of an element in Elementor. The selector tag automatically targets only that specific element, so the style won’t affect others.
selector {
hyphens: auto;
overflow-wrap: anywhere;
}Some solutions only work on the live site. Always publish and test after each change, as results may not appear in the editor.
