Archived topic
Auto Hyphenate Headings
3 replies · Started by Brenden on October 19, 2021
I can't figure out how to get auto hyphenation to apply to headings, yet it works in paragraphs. Here is a screenshot - https://share.getcloudapp.com/o0u7kRwy. Here is the page pictured in the screenshot - https://pcfstag.wpengine.com/program/center-for-pontiac-entrepreneurship/
Hi there,
Hyphenation support in web browsers is awful... see here for browser support:
https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens
You would need to add some CSS at the element you want to hyphenate.
Select the Headline Block, and in Advanced > Additional CSS Class(es) add: will-hyphenate
Then add this CSS:
.will-hyphenate {
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}There are also some additional properties for limiting char / lines etc from breaking see here:
https://css-tricks.com/almanac/properties/h/hyphenate-limit-chars/
You may want to consider changing the font size for the different responsive device sizes, or lean on some CSS such as the clamp property to auto size the text so it doesn't break or hyphenate
I was not aware of clamp. It is magical! That solved my problem, thank you!
Glad to be of help!
