rick@tillitsdone.com

+66824564755

Scroll to discover

CSS Hyphens Enhance Text Readability with Easy Hyphenation

CSS hyphens property boosts text readability by controlling word breaks.

Choose from 'none', 'manual', or 'auto' options to manage hyphenation effectively.

Introduction

In web development, managing text flow is crucial for readable and visually appealing layouts. The CSS hyphens property helps control how words break and hyphenate across lines. Introduced in September 2023, this feature works well on the latest devices and browsers. It lets you prevent hyphenation, manually specify break points, or let the browser handle it automatically.

Using the hyphens property improves readability, especially on text-heavy sites. By configuring it properly, you ensure words break nicely, maintaining flow and coherence. Whether you’re a seasoned developer or a beginner, mastering hyphens can greatly enhance your site’s aesthetics and user experience. Let’s explore how to use it effectively.

Specification

The hyphens property is defined in the CSS Text Module Level 3 specification. This module covers text rendering rules, including hyphenation. You can find detailed guidelines here:

CSS Text Module Level 3: hyphens property
- CSS Text Module Level 3

Description

The hyphens property controls word breaks and hyphenation at line ends, ensuring smooth text flow. It has three main values:

none: Prevents word breaks at line ends.
manual (default): Allows breaks at manually specified points, like soft hyphens ().
auto: Lets the browser decide where to break words based on language rules.

Additionally, it supports global values like inherit, initial, revert, and unset, which manage how the property is inherited or reset.

Syntax

The syntax for the hyphens property is straightforward:

/* Keyword values */
hyphens: none;
hyphens: manual;
hyphens: auto;

/* Global values */
hyphens: inherit;
hyphens: initial;
hyphens: revert;
hyphens: revert-layer;
hyphens: unset;

Keyword values: Control hyphenation behavior.
- none: No word breaks.
- manual: Breaks at specified points.
- auto: Browser decides breaks.
Global values: Manage inheritance and default behavior.
- inherit: Inherits from parent.
- initial: Sets to default (manual).
- revert and revert-layer: Revert to user agent or outer scope default.
- unset: Resets to natural value.

Values

The hyphens property accepts several values:

none: Prevents word breaks.
manual (default): Breaks at specified points.
auto: Browser decides breaks.

Global values include:

initial: Resets to default (manual).
inherit: Inherits from parent.
revert: Reverts to user agent default.
revert-layer: Reverts considering cascade layers.
unset: Resets to natural value.

Suggesting Line Break Opportunities

You can manually specify break points using Unicode characters:

U+2010 (HYPHEN): Always shows a hyphen.
U+00AD (SHY): Invisible soft hyphen ().

Example:

An extra&shy;ordinarily long English word!

This suggests a break point without visibly altering the text.

Formal Definition

The hyphens property has specific attributes:

Attribute	Value
Initial Value	`manual`
Applies To	All elements
Inherited	Yes
Computed Value	As specified
Animation Type	Discrete

Formal Syntax

The formal syntax for the hyphens property is:

hyphens = none | manual | auto

It also supports global values:

hyphens = inherit | initial | revert | revert-layer | unset

Examples

Example 1: Basic Usage

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hyphens Property Example</title>
    <style>
        .none {
            hyphens: none;
        }
        .manual {
            hyphens: manual;
        }
        .auto {
            hyphens: auto;
        }
    </style>
</head>
<body>
    <p class="none">This paragraph will not have any hyphenated words at the end of lines.</p>
    <p class="manual">This paragraph will only have hyphenated words at the end of lines where soft hyphens (&shy;) are inserted.</p>
    <p class="auto">This paragraph will have hyphenated words at the end of lines automatically decided by the browser.</p>
</body>
</html>

This example demonstrates how to use the hyphens property with different values to control text hyphenation effectively.

CSS hyphens Property Examples

Here are some examples to show how the hyphens property works in CSS.

Example 1: Basic Usage

<!DOCTYPE html>
<html>
<head>
    <title>CSS hyphens Property Examples</title>
    <style>
        .container {
            width: 150px;
            border: 1px solid #000;
            padding: 10px;
            margin-bottom: 10px;
        }
        .none {
            hyphens: none;
        }
        .manual {
            hyphens: manual;
        }
        .auto {
            hyphens: auto;
        }
    </style>
</head>
<body>
    <h1>CSS hyphens Property Examples</h1>

    <div class="container none">
        <h3>hyphens: none</h3>
        <p>An extraordinarily long English word!</p>
    </div>

    <div class="container manual">
        <h3>hyphens: manual</h3>
        <p>An extra&shy;ordinarily long English word!</p>
    </div>

    <div class="container auto">
        <h3>hyphens: auto</h3>
        <p>An extraordinarily long English word!</p>
    </div>
</body>
</html>

Explanation:

hyphens: none: The text will not be hyphenated, and the word may overflow the container.
hyphens: manual: The word will be hyphenated at the specified soft hyphen ().
hyphens: auto: The browser will automatically determine where to hyphenate the word.

Example 2: More Detailed Usage

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS hyphens Property in Action</title>
    <style>
        .box {
            width: 200px;
            border: 1px solid #000;
            padding: 10px;
            margin-bottom: 20px;
        }
        .none {
            hyphens: none;
        }
        .manual {
            hyphens: manual;
        }
        .auto {
            hyphens: auto;
        }
    </style>
</head>
<body>
    <h1>CSS hyphens Property in Action</h1>

    <div class="box none">
        <h3>hyphens: none</h3>
        <p>Paul Cézanne was a French artist and Post-Impressionist painter whose work laid the foundations of the transition from the 19th-century conception of artistic endeavor to a new and radically different world of art in the 20th century.</p>
    </div>

    <div class="box manual">
        <h3>hyphens: manual</h3>
        <p>Paul Cézanne was a French artist and Post-Impres&shy;sionist painter whose work laid the foundations of the transition from the 19th-century conception of artistic endeavor to a new and radically different world of art in the 20th century.</p>
    </div>

    <div class="box auto">
        <h3>hyphens: auto</h3>
        <p>Paul Cézanne was a French artist and Post-Impressionist painter whose work laid the foundations of the transition from the 19th-century conception of artistic endeavor to a new and radically different world of art in the 20th century.</p>
    </div>
</body>
</html>

Explanation:

hyphens: none: The text will not be hyphenated, and long words may cause overflow.
hyphens: manual: The word “Post-Impressionist” will be hyphenated at the specified soft hyphen ().
hyphens: auto: The browser will automatically determine the best points for hyphenation, ensuring the text flows smoothly.

Example 3: Language-Specific Hyphenation

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS hyphens Property with Languages</title>
    <style>
        .box {
            width: 200px;
            border: 1px solid #000;
            padding: 10px;
            margin-bottom: 20px;
        }
        .auto {
            hyphens: auto;
        }
    </style>
</head>
<body>
    <h1>CSS hyphens Property with Languages</h1>

    <div class="box auto" lang="en">
        <h3>English Text</h3>
        <p>Paul Cézanne was a French artist and Post-Impressionist painter whose work laid the foundations of the transition from the 19th-century conception of artistic endeavor to a new and radically different world of art in the 20th century.</p>
    </div>

    <div class="box auto" lang="fr">
        <h3>French Text</h3>
        <p>Paul Cézanne était un artiste français et un peintre post-impressionniste dont le travail a posé les bases de la transition de la conception artistique du 19ème siècle à un nouveau monde radicalement différent de l'art au 20ème siècle.</p>
    </div>

    <div class="box auto" lang="de">
        <h3>German Text</h3>
        <p>Paul Cézanne war ein französischer Künstler und postimpressionistischer Maler, dessen Werk die Grundlagen für den Übergang von der Kunstauffassung des 19. Jahrhunderts zu einer neuen und radikal anderen Welt der Kunst im 20. Jahrhundert legte.</p>
    </div>
</body>
</html>

Explanation:

English Text: The browser will automatically hyphenate the English text based on its rules.
French Text: The browser will automatically hyphenate the French text based on its rules.
German Text: The browser will automatically hyphenate the German text based on its rules.

Specifying Text Hyphenation

Specifying text hyphenation with the hyphens property allows you to control how words break at the end of lines, enhancing the readability and visual appeal of your content. Here’s how you can specify text hyphenation using the hyphens property:

HTML

<dl>
  <dt><code>none</code>: no hyphen; overflow if needed</dt>
  <dd lang="en" class="none">An extreme&shy;ly long English word</dd>
  <dt>
    <code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)
  </dt>
  <dd lang="en" class="manual">An extreme&shy;ly long English word</dd>
  <dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt>
  <dd lang="en" class="auto">An extreme&shy;ly long English word</dd>
</dl>

CSS

dd {
  width: 55px;
  border: 1px solid black;
}
dd.none {
  hyphens: none;
}
dd.manual {
  hyphens: manual;
}
dd.auto {
  hyphens: auto;
}

Explanation

none:
- Description: Prevents words from being broken at line breaks. The text will only wrap at whitespace.
- Usage: Use this value when you want to prevent any hyphenation, ensuring that words remain intact even if it results in overflow.
manual:
- Description: Allows words to be broken at manually specified points within the text, such as where a soft hyphen () is inserted.
- Usage: Use this value when you need precise control over where hyphens appear, typically in cases where you manually insert soft hyphens in the text.
auto:
- Description: The browser is free to automatically break words at appropriate hyphenation points, following whatever rules it chooses. However, suggested line break opportunities (such as soft hyphens) will override automatic break point selection when present.
- Usage: Use this value to let the browser handle hyphenation automatically, which is useful for text-heavy layouts where manual control is impractical.

Browser Compatibility

The hyphens property in CSS is widely supported across modern browsers, ensuring that developers can rely on it to manage text hyphenation effectively. However, it’s essential to be aware of the specific versions and any limitations that might exist. Below is an overview of the browser compatibility for the hyphens property:

Google Chrome: Supported from version 55.0 onwards (released in December 2016).
Mozilla Firefox: Supported from version 43.0 onwards (released in December 2015).
Internet Explorer: Supported from version 10.0 onwards (released in September 2012).
Microsoft Edge: Supported from version 79 onwards.
Opera: Supported from version 44.0 onwards (released in March 2017).
Safari: Supported from version 5.1 onwards (released in October 2011).

Note: Older versions of these browsers may not support the hyphens property, so it’s crucial to test your implementation across different browser versions to ensure compatibility.

Supported Browsers

The hyphens property in CSS is supported by a wide range of modern browsers, ensuring that developers can rely on it to manage text hyphenation effectively. Below is a list of browsers that support the hyphens property, along with the versions where support was introduced:

Google Chrome: Supported from version 55.0 onwards (released in December 2016).
Mozilla Firefox: Supported from version 43.0 onwards (released in December 2015).
Internet Explorer: Supported from version 10.0 onwards (released in September 2012).
Microsoft Edge: Supported from version 79 onwards.
Opera: Supported from version 44.0 onwards (released in March 2017).
Safari: Supported from version 5.1 onwards (released in October 2011).

Note: Older versions of these browsers may not support the hyphens property, so it’s crucial to test your implementation across different browser versions to ensure compatibility.

By understanding the supported browsers for the hyphens property, you can ensure that your web projects maintain consistent and effective text hyphenation across various devices and platforms. This knowledge allows you to create more robust and user-friendly web designs, enhancing the overall user experience.

CSS Blogs

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

CSS property CSS animation

css_property_cover/css-property-hyphenate-limit-chars.png

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.

css_property_cover/css-property-font-kerning.png

CSS Font-Kerning Enhancing Text Readability CSS font-kerning improves text readability and visual appeal by adjusting character spacing. Available options include auto, normal, and none for better typography.

css_property_cover/css-property-columns.png

Mastering CSS Columns Enhance Readability & Design Learn how to use CSS columns to create newspaper-style layouts. Explore available options like column-width and column-count for flexible designs.

css_property_cover/css-property--webkit-line-clamp.png

CSS -webkit-line-clamp Control Text Overflow Easily Learn how to use CSS -webkit-line-clamp to limit text lines and add ellipses for overflow. Explore available options and ensure compatibility across browsers.

css_property_cover/css-property-border-block-end-style.png

CSS Border-Block-End-Style Control Logical Block-End Border Learn about the CSS border-block-end-style property that controls the style of the logical block-end border of an element. Discover available options like none, solid, dashed, and more.

css_property_cover/css-property-border-block-start.png

CSS Border-Block-Start Simplified Border Styling CSS border-block-start is a versatile property for setting block-start border styles in a single declaration. Use it to simplify border definitions, adaptable to various writing modes and text orientations. Options include width, style, and color.

View all 337 CSS blogs

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?

Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!

🖐️ Contact us

Explore our best articles, cover a wide variety of technologies

Our knowledge base

UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

150 Articles

Explore

Nodejs

JavaScript runtime for building scalable, high-performance server-side applications.

60 Articles

Explore

Nextjs

React framework enabling server-side rendering and static site generation for optimized performance.

40 Articles

Explore

Typescript

Superset of JavaScript adding static types for improved code quality and maintainability.

39 Articles

Explore

TailwindCSS

Utility-first CSS framework for rapid UI development.

130 Articles

Explore

Golang

Programming language known for its simplicity, concurrency model, and performance.

70 Articles

Explore

AstroJs

Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.

40 Articles

Explore

Jest

Versatile testing framework for JavaScript applications supporting various test types.

337 Articles

Explore

CSS

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

Let's keep 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

Facebook Instagram LinkedIn

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.

DesignRush
web design companies

Goodfirms