CSS hyphenate-character Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The hyphenate-character property specifies the glyph or sequence of glyphs the user agent will render as the visible marker when it inserts a hyphenation break at the end of a line. Rather than altering the underlying text content, this is a presentational insertion used by the formatting engine to show where a word has been split across lines. Because it affects only the visual marker used by automated hyphenation, its effects are most noticeable in tightly set text blocks, narrow columns, or justified text where hyphenation is used to improve line breaks and hyphenation frequency.

This property only takes effect in the contexts where the browser is performing hyphenation; it is therefore closely related to the hyphenation control for the element. For example, automatic hyphenation behavior must be enabled (via hyphens) for the agent to insert hyphenation markers at line breaks. It also interacts with the line-breaking algorithm and wrapping behavior: decisions about where to break a word and whether to hyphenate at all are influenced by other layout rules such as line-break handling and wrapping strategy, and the chosen hyphenation marker can change the visual result of those line-break decisions.

When choosing or styling a hyphenation marker, there are practical considerations for readability, typography and script-specific behavior. The marker should harmonize with the font’s metrics and shaping: some scripts and fonts may use special joining behavior or ligatures that change when a marker is present, and unsupported characters may cause fallback glyphs or spacing issues. The marker’s presence is primarily visual and may be treated differently by selection and copy operations depending on the user agent; authors who need precise control over text content versus presentation should test how their target browsers handle copying, screen readers and accessibility APIs. Because hyphenation also interacts with wrapping policies, it can have an effect on overflow and layout stability—properties that govern wrapping and break opportunities, such as line-break and overflow-wrap, will influence when and how the hyphenation marker is utilized.

Definition

Initial value: auto
Applies to: all elements
Inherited: yes
Computed value: as specified
Animatable: yes
JavaScript syntax: object.style.hyphenateCharacter

Interactive Demo

hyphenate-character: auto;

hyphenate-character: '=';

hyphenate-character: '—';

An extraordinarily long English word!

Syntax

hyphenate-character: auto | <string>

Values

autoThe user-agent selects an appropriate string based on the content language's typographic conventions. This is the default property value, and only needs to be explicitly set in order to override a different inherited value.
<string>The <string> to use at the end of the line before a hyphenation break. The user agent may truncate this value if too many characters are used.

Example

HTML

<div class="wrap">

    <h2>CSS hyphenate-character example</h2>



    <div class="example default">

        <h3>Default hyphen</h3>

        <p lang="en">

            Antidisestablishmentarianism is a famously long English word used to demonstrate automatic hyphenation over line breaks when the container is narrow enough.

        </p>

    </div>



    <div class="example custom">

        <h3>Custom hyphen character</h3>

        <p lang="en" class="custom-hyphen">

            Antidisestablishmentarianism is a famously long English word used to demonstrate automatic hyphenation over line breaks when the container is narrow enough.

        </p>

    </div>

</div>

CSS

/* Layout and typography */
.wrap {
    max-width: 720px;
    margin: 24px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
    color: #222;
}

.example {
    margin-top: 16px;
    padding: 12px;
    border: 1px solid #e6e6e6;
    background: #fbfbfb;
}

.example h3 {
    margin: 0 0 8px 0;
    font-size: 0.95rem;
}

/* Narrow the paragraphs so hyphenation is likely to occur */
.example p {
    width: 240px;
    margin: 0;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}

/* Use a custom visible character for hyphenation points */
.custom-hyphen {
    /* Set the hyphenation marker to a bullet (•) */
    hyphenate-character: "•";
}

/* Small visual hint to compare both blocks side by side on wide viewports */
@media (min-width: 760px) {
    .wrap {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .wrap > .example {
        margin-top: 0;
    }
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS hyphenate-character property. Hover over a browser icon to see the version that first introduced support for this CSS property.