{"id":344521,"date":"2021-07-15T03:47:00","date_gmt":"2021-07-15T10:47:00","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=344521"},"modified":"2022-07-18T08:42:08","modified_gmt":"2022-07-18T15:42:08","slug":"hyphenate-limit-chars","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/h\/hyphenate-limit-chars\/","title":{"rendered":"hyphenate-limit-chars"},"content":{"rendered":"\n

The hyphenate-limit-chars<\/code> property in CSS tells the browser how many characters a word should be before it’s hyphenated, as well as the minimum number of characters before and after the hyphen. This way, we can avoid awkward hyphenations, giving us an extra degree of control when it comes to how words flow from line to line.<\/p>\n\n\n\n

.element {\n  hyphens: auto;\n  hyphenate-limit-chars: 10 3 4;\n}<\/code><\/pre>\n\n\n\n
In the CSS rule above, the last declaration indicates to the browser that it should hyphenate only words of 10 characters or more and, when it does, three is the minimum number of characters before the hyphen and four is the minimum after the hyphen. Note that hyphens: auto;<\/code> is only needed if the hyphens: none;<\/code> has been set somewhere else in the stylesheet so that hyphenation is enabled.<\/p>\n\n\n\n
hyphenate-limit-chars<\/code> is included in the CSS Text Module Level 4 specification<\/a>, which is currently in Draft status. That means the definition is only provided for discussion and can be changed at any time.<\/p>\n\n\n
Syntax<\/h3>\n\n\n
hyphenate-limit-chars: [auto | <integer> ]{1,3};<\/code><\/pre>\n\n\n\n
  • Initial value: auto<\/code><\/li>
  • Applies to: text<\/li>
  • Inherited: yes<\/li>
  • Computed value: three values, each either the auto<\/code> keyword or an integer<\/li>
  • Animation type: by computed value type<\/li><\/ul>\n\n\n\n
    If the third value is unspecified, then it uses the same value as the second one. If both the second and third values are unspecified, then it evaluates to auto<\/code> which means the user agent deems what is best based on the language and layout.<\/p>\n\n\n\n
    The default value of hyphenate-limit-chars<\/code>, auto<\/code>, is equivalent to 5 2 2<\/code> (i.e. the word length is 5, and 2 is the minimum number of characters before and after the hyphen).<\/p>\n\n\n
    Values<\/h3>\n\n\n
    hyphenate-limit-chars: auto;\nhyphenate-limit-chars: 8 2 4;\nhyphenate-limit-chars: 8 2; \/* 8 2 auto *\/\nhyphenate-limit-chars: 8; \/* 8 auto auto *\/\n\n\/* Global values *\/\nhyphenate-limit-chars: initial;\nhyphenate-limit-chars: inherit;\nhyphenate-limit-chars: unset;<\/code><\/pre>\n\n\n
    Browser support<\/h3>\n\n\n
    hyphenate-limit-chars<\/code> property is supported by Edge and Internet Explorer 10+ with the -ms<\/code> prefix. It is also supported in Safari with -webkit-hyphenate-limit-before<\/code> and \u2013webkit-hyphenate-limit-after<\/code> which are both legacy properties. As their names imply, -webkit-hyphenate-limit-before<\/code> specifies the minimum number of characters before the hyphen and \u2013webkit-hyphenate-limit-after<\/code>, the minimum number of characters after the hyphen.<\/p>\n\n\n\n
    Putting all that together, we have:<\/p>\n\n\n\n
    .element {\n  -webkit-hyphens: auto;\n  -ms-hyphens: auto;\n  hyphens: auto;\n\n  -webkit-hyphenate-limit-before: 3; \/* For Safari *\/\n  -webkit-hyphenate-limit-after: 4; \/* For Safari *\/\n  -ms-hyphenate-limit-chars: 10 3 4;\n  hyphenate-limit-chars: 10 3 4;\n}<\/code><\/pre>\n\n\n
    Demo<\/h3>\n\n\n
    Resize the pen below to notice the hyphenation on the dummy text.<\/p>\n\n\n\n