Tillitsdone
down Scroll to discover
CSS hyphenate-limit-chars Enhance Typography with Precise Hyphenation
Learn about CSS hyphenate-limit-chars to control text hyphenation.

Set minimum word length and characters before/after hyphen for better readability.

Various options available.
thumbnail

Syntax

The hyphenate-limit-chars property in CSS allows you to control text hyphenation with specific values. Here’s a simple breakdown:

/* Numeric values */
hyphenate-limit-chars: 10 4 4;
hyphenate-limit-chars: 10 4;
hyphenate-limit-chars: 10;
/* Keyword values */
hyphenate-limit-chars: auto auto auto;
hyphenate-limit-chars: auto auto;
hyphenate-limit-chars: auto;
/* Mix of numeric and keyword values */
hyphenate-limit-chars: 10 auto 4;
hyphenate-limit-chars: 10 auto;
hyphenate-limit-chars: auto 3;
/* Global values */
hyphenate-limit-chars: inherit;
hyphenate-limit-chars: initial;
hyphenate-limit-chars: revert;
hyphenate-limit-chars: revert-layer;
hyphenate-limit-chars: unset;

Explanation

  • Numeric Values:

    • 10 4 4: Minimum word length is 10, 4 characters before and after the hyphen.
    • 10 4: Minimum word length is 10, 4 characters before the hyphen, and same after.
    • 10: Minimum word length is 10, others are auto.
  • Keyword Values:

    • auto: User agent chooses appropriate values. Defaults to 5 characters for word length, 2 before and after.
  • Mixed Values:

    • You can mix numeric and auto values for partial control.
  • Global Values:

    • inherit: Inherits value from parent.
    • initial: Sets to default value.
    • revert: Reverts to user agent’s default.
    • revert-layer: Reverts to parent layer’s value.
    • unset: Resets to natural value.

Values

  • <number> <number> <number>: Specifies word length, characters before, and after the hyphen.
  • <number> <number>: Specifies word length and characters before the hyphen (same after).
  • <number>: Specifies word length, others are auto.
  • auto: User agent chooses values.
  • Mix: Combine numeric and auto.
  • Global Values: inherit, initial, revert, revert-layer, unset.

Formal Syntax

The formal syntax for hyphenate-limit-chars is:

hyphenate-limit-chars =
[[ auto | <integer> ]{1,3} ]

Example

HTML

<div class="container">
<p id="ex1">juxtaposition and acknowledgement</p>
<p id="ex2">juxtaposition and acknowledgement</p>
<p id="ex3">juxtaposition and acknowledgement</p>
<p id="ex4">juxtaposition and acknowledgement</p>
</div>

CSS

.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
p {
margin: 1rem;
width: 120px;
border: 2px dashed #999;
font-size: 1.5rem;
hyphens: auto;
}
#ex2 {
hyphenate-limit-chars: 14;
}
#ex3 {
hyphenate-limit-chars: 5 9 2;
}
#ex4 {
hyphenate-limit-chars: 5 2 7;
}

This will demonstrate different hyphenation rules applied to the text.

Browser Compatibility

The hyphenate-limit-chars property is supported by some browsers but not all. Here’s a quick overview:

Supported Browsers

  • Google Chrome: Supports from version 13.
  • Microsoft Edge: Supports from version 79.
  • Opera: Supports from version 44.0.

Not Supported

  • Mozilla Firefox: No support.
  • Safari: No support.

For the latest compatibility info, check the MDN Web Docs Browser Compatibility Data.

Alternatives and Fallbacks

If you need to support browsers that don’t support hyphenate-limit-chars, consider these alternatives:

  • CSS hyphens Property: Basic hyphenation control.
  • JavaScript Libraries: Libraries can handle text hyphenation.
  • Manual Hyphenation: Manually insert hyphens using the soft hyphen character (&shy;).

Best Practices

  1. Test Across Browsers: Ensure consistent text presentation.
  2. Use Feature Queries: Apply hyphenate-limit-chars only in supporting browsers.
  3. Provide Fallbacks: Maintain a consistent user experience.

See Also

For more info, check out:

By understanding and using hyphenate-limit-chars, you can create more polished and readable websites. Happy coding!

Get in Touch
Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.
Contact Information
rick@tillitsdone.com+66824564755
Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.
Address
9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand
Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.
Social media
Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.
We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.
Frequently Asked Questions
Explore frequently asked questions about our products and services.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.