css hyphens not working safari

CSS Hyphenation

Method of controlling when words at the end of lines should be hyphenated using the "hyphens" property.

• 4 - 54 : Not supported
• 55 - 87 : Partial support
• 88 - 123 : Supported
• 124 : Supported
• 125 - 127 : Supported
• 12 - 18 : Supported
• 79 - 87 : Partial support
• 88 - 104 : Partial support
• 105 - 122 : Supported
• 123 : Supported
• 3.1 - 5 : Not supported
• 5.1 - 16.6 : Supported
• 17.0 - 17.3 : Supported
• 17.4 : Supported
• 17.5 - TP : Supported
• 2 - 5 : Not supported
• 6 - 42 : Supported
• 43 - 124 : Supported
• 125 : Supported
• 126 - 128 : Supported
• 9 - 41 : Not supported
• 42 - 90 : Partial support
• 91 - 108 : Supported
• 109 : Supported
• 5.5 - 9 : Not supported
• 10 : Supported
• 11 : Supported

Chrome for Android

Safari on ios.

• 3.2 - 4.1 : Not supported
• 4.2 - 16.7 : Supported
• 17.5 : Supported

Samsung Internet

• 4 : Not supported
• 5 : Partial support
• 6.2 - 23 : Supported
• 24 : Supported
• all : Not supported

Opera Mobile

• 10 - 12.1 : Not supported
• 80 : Supported

UC Browser for Android

• 15.5 : Supported

Android Browser

• 2.1 - 4.4.4 : Not supported

Firefox for Android

• 14.9 : Supported

Baidu Browser

• 13.52 : Supported

KaiOS Browser

• 2.5 : Supported
• 3 : Supported

Chrome < 55 and Android 4.0 Browser support "-webkit-hyphens: none", but not the "auto" property. It is advisable to set the @lang attribute on the HTML element to enable hyphenation support and improve accessibility.

• Español – América Latina
• Português – Brasil
• Tiếng Việt

Manage hyphens with CSS

In many written languages, it's possible to break lines between syllables as well as between words. This is often done so that more characters may be placed on a line of text with the goal of having fewer lines in a text area, and thus saving space. In such languages the break is indicated visually with a hyphen ('-').

The CSS Text Module Level 3 defines a hyphens property to control when hyphens are shown to users and how they behave when shown. Starting with version 55, Chrome implements the hyphens property. Per the specification, the hyphens property has three values: none , manual , and auto . To illustrate this we need to use a soft hyphen ( &shy; ) as in the following example.

A soft hyphen is one that will only be shown when it occurs at the trailing margin. How this hyphen renders in Chrome 55 or later depends on the value of the CSS hypens property.

Combining these gives a result like this:

Notice that the soft hyphen isn't visible. In all cases, when a word containing the soft hyphen fits on a single line, the hypen will be invisible. Now, let's look at how all three values of hyphen behave.

In the first example, the hyphens property is set to none . This prevents the soft hyphen from ever being displayed. You can confirm this by adjusting the window size so that the word 'elit' will not fit in the visible line of text.

Using manual

In the second example, the hyphens property is set to manual meaning the soft hyphen will only appear when the margin breaks the word 'elit'. Again, you can confirm this by adjusting the window size.

In the third example, the hyphens property is set to auto . In this case, no soft hyphen is needed since the user agent will determine hyphen locations automatically. If you resize the window, you'll see that the browser hyphenates this example in the same place as in the second, though no soft hyphen is present. If you continue to shrink the window, you'll see that your browser is able to break lines between any two syllables in the text.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2016-10-21 UTC.

• Skip to main content
• Select language
• Skip to search

Formal syntax

The hyphens CSS property specifies how words should be hyphenated when text wraps across multiple lines. You can prevent hyphenation entirely, use hyphenation in manually-specified points within the text, or let the browser automatically insert hyphens where appropriate.

Hyphenation rules are language-specific. In HTML, the language is determined by the lang attribute, and browsers will hyphenate only if this attribute is present and if an appropriate hyphenation dictionary is available. In XML, the xml:lang attribute must be used.

Note: The rules defining how hyphenation is performed are not explicitly defined by the specification, so the exact hyphenation may vary from browser to browser.

The hyphens property is specified as a single keyword chosen from the list below.

Note: The auto setting's behavior depends on the language being properly tagged so that the appropriate hyphenation rules can be selected. You must specify a language using the lang HTML attribute in order to guarantee that automatic hyphenation is applied in the language of your choice.

Suggesting line break opportunities

There are two Unicode characters that can be used to manually specify potential line break points within text:

This example uses three classes, one for each possible configuration of the hyphens property.

Specifications

Browser compatibility.

[1] No automatic hyphenation , only -webkit-hyphens: none is supported.

[2] Automatic hyphenation only works for languages whose hyphenation dictionaries are integrated in Gecko. See the note below for a complete list of such languages.

[3] Automatic hyphenation only works for languages whose hyphenation dictionaries are integrated in Internet Explorer. See the note below for a complete list of such languages.

[4] Uses an en-US dictionary.

[5] en-GB and en-US used different dictionaries.

[6] Uses a Portuguese dictionary.

Document Tags and Contributors

• CSS Property
• CSS Reference
• letter-spacing
• overflow-wrap
• text-align-last
• text-indent
• text-justify
• text-size-adjust
• text-transform
• white-space
• word-spacing

CSS Reference

Css properties, css hyphens property.

Set different hyphenations:

Definition and Usage

The hyphens property defines whether hyphenation is allowed to create more soft wrap opportunities within a line of text.

Show demo ❯

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Advertisement

Property Values

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

hyphenate-limit-chars

The hyphenate-limit-chars 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.

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; is only needed if the hyphens: none; has been set somewhere else in the stylesheet so that hyphenation is enabled.

hyphenate-limit-chars is included in the CSS Text Module Level 4 specification , which is currently in Draft status. That means the definition is only provided for discussion and can be changed at any time.

• Initial value: auto
• Applies to: text
• Inherited: yes
• Computed value: three values, each either the auto keyword or an integer
• Animation type: by computed value type

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 which means the user agent deems what is best based on the language and layout.

The default value of hyphenate-limit-chars , auto , is equivalent to 5 2 2 (i.e. the word length is 5, and 2 is the minimum number of characters before and after the hyphen).

Browser support

hyphenate-limit-chars property is supported by Edge and Internet Explorer 10+ with the -ms prefix. It is also supported in Safari with -webkit-hyphenate-limit-before and –webkit-hyphenate-limit-after which are both legacy properties. As their names imply, -webkit-hyphenate-limit-before specifies the minimum number of characters before the hyphen and –webkit-hyphenate-limit-after , the minimum number of characters after the hyphen.

Putting all that together, we have:

Resize the pen below to notice the hyphenation on the dummy text.

More information

Better line breaks for long urls.

Where Lines Break is Complicated. Here’s all the Related CSS and HTML.

Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)

Related properties.

• Animated Text Generator
• Animation / Keyframe Generator
• Border Radius Generator
• Box Shadow Generator
• Button Generator
• Checkbox / Radio Generator
• Clip Path Generator
• Column Generator
• Cubic Bezier Generator
• Flip Swith Generator
• Flexbox Generator
• Glitch Text Effect
• Google Fonts CSS
• Gradient Generator
• Grid Generator
• Image Filter Generator
• Input Range Generator
• Layout Generator
• Loader / Spinner Generator
• Menu Generator
• Pattern Generator
• RGBA Generator
• Ribbon Generator
• Ribbon Banner Generator
• Scrollbar Generator
• Select Dropdown Generator
• Sprite Generator
• Text Gradient Generator
• Text Input Generator
• Text Rotate Generator
• Text Shadow Generator
• Tooltip Generator
• Triangle Generator
• 3D Transform Generator
• CSS At Rules
• CSS Animations
• CSS Color Names
• CSS Data Types
• CSS Functions
• CSS Preloaders
• CSS Properties
• CSS Pseudo Classes
• CSS Selectors
• LESS to CSS Compiler
• SCSS to CSS Compiler
• Stylus to CSS Compiler
• CSS to LESS Converter
• CSS to SCSS Converter
• CSS to Stylus Converter
• CSS Color Converter
• CSS Cursor Viewer
• CSS Font Preview
• CSS Code Formatter
• CSS Lengths
• CSS Code Optimizer
• CSS Validator
• CSS Visual Style Editor
• Convert Image to Data
• Online CSS Editor
• HTML to Pug Converter
• HTML to Markdown Converter
• Pug to HTML Compiler
• Markdown to HTML Compiler
• HTML Beautifier / Minifier
• HTML Character Codes
• HTML Colors
• HTML Entity Encoder / Decoder
• HTML Online Editor
• HTML Table Generator
• HTML Tutorial
• HTML Attributes
• HTML Event Attributes
• HTML Global Attributes
• HTTP Status Codes
• HTML Validator
• @counter-style
• @font-feature-values
• @font-palette-values
• <absolute-size>
• <alpha-value>
• <angle>
• <angle-percentage>
• <basic-shape>
• <blend-mode>
• <color>
• <filter-function>
• <flex>
• <frequency>
• <gradient>
• <image>
• <integer>
• <length>
• <number>
• <percentage>
• <position>
• <ratio>
• <resolution>
• <string>
• <time>
• <url>
• brightness()
• drop-shadow()
• grayscale()
• hue-rotate()
• conic-gradient()
• linear-gradient()
• radial-gradient()
• repeating-conic-gradient()
• repeating-linear-gradient()
• repeating-radial-gradient()
• perspective()
• translate()
• translate3d()
• translateX()
• translateY()
• translateZ()
• accent-color
• align-content
• align-items
• animation-composition
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function
• aspect-ratio
• backdrop-filter
• backface-visibility
• background-attachment
• background-blend-mode
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-position-x
• background-position-y
• background-repeat
• background-size
• border-block
• border-block-color
• border-block-end
• border-block-end-color
• border-block-end-style
• border-block-end-width
• border-block-start
• border-block-start-color
• border-block-start-style
• border-block-start-width
• border-block-style
• border-block-width
• border-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-collapse
• border-color
• border-end-end-radius
• border-end-start-radius
• border-image
• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width
• border-inline
• border-inline-color
• border-inline-end
• border-inline-end-color
• border-inline-end-style
• border-inline-end-width
• border-inline-start
• border-inline-start-color
• border-inline-start-style
• border-inline-start-width
• border-inline-style
• border-inline-width
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-radius
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-spacing
• border-start-end-radius
• border-start-start-radius
• border-style
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width
• border-width
• box-decoration-break
• break-after
• break-before
• break-inside
• caption-side
• caret-color
• color-scheme
• column-count
• column-fill
• column-rule
• column-rule-color
• column-rule-style
• column-rule-width
• column-span
• column-width
• contain-intrinsic-block-size
• contain-intrinsic-height
• contain-intrinsic-inline-size
• contain-intrinsic-size
• contain-intrinsic-width
• container-name
• container-type
• counter-increment
• counter-reset
• counter-set
• empty-cells
• flex-direction
• flex-shrink
• font-family
• font-feature-settings
• font-kerning
• font-language-override
• font-optical-sizing
• font-palette
• font-size-adjust
• font-stretch
• font-synthesis
• font-synthesis-small-caps
• font-synthesis-style
• font-synthesis-weight
• font-variant
• font-variant-alternates
• font-variant-caps
• font-variant-east-asian
• font-variant-emoji
• font-variant-ligatures
• font-variant-numeric
• font-variant-position
• font-variation-settings
• font-weight
• forced-color-adjust
• grid-auto-columns
• grid-auto-flow
• grid-auto-rows
• grid-column
• grid-column-end
• grid-column-start
• grid-row-end
• grid-row-start
• grid-template
• grid-template-areas
• grid-template-columns
• grid-template-rows
• hanging-punctuation
• hyphenate-character
• hyphenate-limit-chars
• image-orientation
• image-rendering
• inline-size
• inset-block
• inset-block-end
• inset-block-start
• inset-inline
• inset-inline-end
• inset-inline-start
• justify-content
• justify-items
• justify-self
• letter-spacing
• line-height
• list-style-image
• list-style-position
• list-style-type
• margin-block
• margin-block-end
• margin-block-start
• margin-bottom
• margin-inline
• margin-inline-end
• margin-inline-start
• margin-left
• margin-right
• max-block-size
• max-inline-size
• min-block-size
• min-inline-size
• mix-blend-mode
• object-position
• offset-anchor
• offset-distance
• offset-path
• offset-position
• offset-rotate
• outline-color
• outline-offset
• outline-style
• outline-width
• overflow-anchor
• overflow-block
• overflow-clip-margin
• overflow-inline
• overflow-wrap
• overscroll-behavior
• overscroll-behavior-block
• overscroll-behavior-inline
• overscroll-behavior-x
• overscroll-behavior-y
• padding-block
• padding-block-end
• padding-block-start
• padding-bottom
• padding-inline
• padding-inline-end
• padding-inline-start
• padding-left
• padding-right
• padding-top
• paint-order
• perspective
• perspective-origin
• place-content
• place-items
• pointer-events
• print-color-adjust
• ruby-position
• scroll-behavior
• scroll-margin
• scroll-margin-block
• scroll-margin-block-end
• scroll-margin-block-start
• scroll-margin-bottom
• scroll-margin-inline
• scroll-margin-inline-end
• scroll-margin-inline-start
• scroll-margin-left
• scroll-margin-right
• scroll-margin-top
• scroll-padding
• scroll-padding-block
• scroll-padding-block-end
• scroll-padding-block-start
• scroll-padding-inline
• scroll-padding-inline-end
• scroll-padding-inline-start
• scroll-snap-align
• scroll-snap-stop
• scroll-snap-type
• scrollbar-color
• scrollbar-gutter
• scrollbar-width
• shape-image-threshold
• shape-margin
• shape-outside
• table-layout
• text-align-last
• text-combine-upright
• text-decoration
• text-decoration-color
• text-decoration-line
• text-decoration-skip-ink
• text-decoration-style
• text-decoration-thickness
• text-emphasis
• text-emphasis-color
• text-emphasis-position
• text-emphasis-style
• text-indent
• text-justify
• text-orientation
• text-overflow
• text-rendering
• text-shadow
• text-transform
• text-underline-offset
• text-underline-position
• touch-action
• transform-box
• transform-origin
• transform-style
• transition-delay
• transition-duration
• transition-property
• transition-timing-function
• unicode-bidi
• user-select
• vertical-align
• white-space
• will-change
• word-spacing
• writing-mode
• :first-child
• :first-of-type
• :focus-visible
• :focus-within
• :fullscreen
• :host-context()
• :indeterminate
• :last-child
• :last-of-type
• :nth-last-child
• :nth-last-of-type
• :nth-of-type
• :only-child
• :only-of-type
• :out-of-range
• :placeholder-shown
• :read-write
• ::file-selector-button
• ::first-letter
• ::first-line
• ::placeholder
• ::selection
• ::slotted()
• accept-charset
• autocomplete
• crossorigin
• formenctype
• formnovalidate
• placeholder
• onafterprint
• onbeforeprint
• onbeforeunload
• oncanplaythrough
• oncontextmenu
• ondragenter
• ondragleave
• ondragstart
• ondurationchange
• onhaschange
• onloadeddata
• onloadedmetadata
• onloadstart
• onmousedown
• onmousemove
• onmouseover
• onmousewheel
• onratechange
• onreadystatechange
• ontimeupdate
• ontouchcancel
• ontouchmove
• ontouchstart
• onvolumechange
• contenteditable
• <abbr>
• <address>
• <area>
• <article>
• <aside>
• <audio>
• <base>
• <bdi>
• <bdo>
• <blockquote>
• <body>
• <button>
• <canvas>
• <caption>
• <cite>
• <code>
• <col>
• <colgroup>
• <comment>
• <data>
• <datalist>
• <del>
• <details>
• <dfn>
• <dialog>
• <div>
• <doctype>
• <embed>
• <fieldset>
• <figcaption>
• <figure>
• <footer>
• <form>
• <head>
• <header>
• <html>
• <iframe>
• <img>
• <input>
• <ins>
• <kbd>
• <label>
• <legend>
• <link>
• <main>
• <map>
• <mark>
• <menu>
• <meta>
• <meter>
• <nav>
• <noscript>
• <object>
• <optgroup>
• <option>
• <output>
• <picture>
• <pre>
• <progress>
• <ruby>
• <samp>
• <script>
• <section>
• <select>
• <slot>
• <small>
• <source>
• <span>
• <strong>
• <style>
• <sub>
• <summary>
• <sup>
• <table>
• <tbody>
• <template>
• <textarea>
• <tfoot>
• <thead>
• <title>
• <track>
• <var>
• <video>
• <wbr>
• 100 Continue
• 101 Switching Protocols
• 103 Early Hints
• 201 Created
• 202 Accepted
• 203 Non-Authoritative Information
• 204 No Content
• 205 Reset Content
• 206 Partial Content
• 300 Multiple Choices
• 301 Moved Permanently
• 303 See Other
• 304 Not Modified
• 307 Temporary Redirect
• 308 Permanent Redirect
• 400 Bad Request
• 401 Unauthorized
• 402 Payment Required
• 403 Forbidden
• 404 Not Found
• 405 Method Not Allowed
• 406 Not Acceptable
• 407 Proxy Authentication Required
• 408 Request Timeout
• 409 Conflict
• 411 Length Required
• 412 Precondition Failed
• 413 Content Too Large
• 414 URI Too Long
• 415 Unsupported Media Type
• 416 Range Not Satisfiable
• 417 Expectation Failed
• 421 Misdirected Request
• 422 Unprocessable Content
• 424 Failed Dependency
• 426 Upgrade Required
• 428 Precondition Required
• 429 Too Many Requests
• 431 Request Header Fields Too Large
• 451 Unavailable For Legal Reasons
• 500 Internal Server Error
• 501 Not Implemented
• 502 Bad Gateway
• 503 Service Unavailable
• 504 Gateway Timeout
• 505 HTTP Version Not Supported
• 507 Insufficient Storage
• 508 Loop Detected
• 510 Not Extended
• 511 Network Authentication Required

If you would like to support CSSPortal, please consider making a small donation.

CSS hyphens Property

Description.

The hyphens CSS property is used to control the hyphenation of text within a webpage. By default, browsers automatically hyphenate long words to improve text layout and readability. However, the hyphens property allows web developers to have more control over this behavior. It has three possible values: "none" (which disables hyphenation altogether), "manual" (which suggests breakpoints where hyphens should occur using the ­ HTML entity), and "auto" (which lets the browser automatically determine suitable hyphenation points based on language-specific rules and user preferences). This property is particularly useful for fine-tuning the appearance of text in multi-language websites and improving the overall aesthetics of web typography.

Interactive Demo

An extra­ordinarily long English word!

• none Words are not hyphenated, even if characters inside the word explicitly define hyphenation opportunities.
• manual Words are only hyphenated where there are characters inside the word that explicitly suggest hyphenation opportunities.
• auto The browser is free to automatically break words at appropriate hyphenation points, following whatever rules it chooses to use.

Browser Support

The following table will show you the current browser support for the CSS hyphens property.

Last updated by CSSPortal on: 2nd January 2024

Share this Page

If you have found this page helpful, please consider sharing with other users, just click on your preferred social media link or copy the webpage from the link below.

Your favorites are stored in your browsers cache. If you clear your browsing data, your favorites will be deleted also.

Search code, repositories, users, issues, pull requests...

Provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-text] Should 'hyphens: auto' work if lang="" is not declared? #869

zcorpan commented Jan 8, 2017

• 👍 3 reactions

inoas commented Jan 8, 2017

Sorry, something went wrong.

frivoal commented Jan 8, 2017 • edited

• 👍 2 reactions
• 🎉 1 reaction

kojiishi commented Jan 10, 2017

Zcorpan commented jan 10, 2017 • edited.

zcorpan commented Jan 20, 2017

Inoas commented jan 20, 2017.

litherum commented Jan 20, 2017

• 👍 1 reaction

zcorpan commented Jan 22, 2017

Crissov commented Jan 22, 2017

Frivoal commented jan 23, 2017, zcorpan commented jan 23, 2017.

clagnut commented Apr 11, 2018 • edited

css-meeting-bot commented Apr 11, 2018

• 😕 1 reaction

inoas commented Apr 12, 2018

Frivoal commented jun 6, 2018 • edited by zcorpan.

zcorpan commented Sep 16, 2018

fantasai commented Sep 16, 2018

Frivoal commented sep 16, 2018.

Evengard commented Apr 23, 2019 • edited

Frivoal commented apr 23, 2019, evengard commented apr 23, 2019.

Successfully merging a pull request may close this issue.