CSS 'hyphens' description added#44363
Merged
Merged
Conversation
added a description. added text to the examples de-notified as the text is just part of the description now
Contributor
|
Preview URLs (1 page) (comment last updated: 2026-06-09 18:33:32) |
chrisdavidmills
requested changes
Jun 8, 2026
chrisdavidmills
left a comment
Contributor
There was a problem hiding this comment.
Looks great, @estelle. Just a few suggestions for you to mull over.
| > If you apply [`word-break: break-all`](/en-US/docs/Web/CSS/Reference/Properties/word-break#break-all) then no hyphens are shown, even if the word breaks at a hyphenation point. | ||
| The `hyphens` property can be used to define how words should be hyphenated when text wraps across multiple lines. It can prevent hyphenation entirely, hyphenate at 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`](/en-US/docs/Web/HTML/Reference/Global_attributes/lang) attribute. Browsers will only hyphenate if this attribute is present and the appropriate hyphenation dictionary is available. The `auto` setting's behavior depends on the language being properly tagged to select the appropriate hyphenation rules. |
Contributor
There was a problem hiding this comment.
Suggested change
| Hyphenation rules are language-specific. In HTML, the language is determined by the [`lang`](/en-US/docs/Web/HTML/Reference/Global_attributes/lang) attribute. Browsers will only hyphenate if this attribute is present and the appropriate hyphenation dictionary is available. The `auto` setting's behavior depends on the language being properly tagged to select the appropriate hyphenation rules. | |
| Hyphenation rules are language-specific. In HTML, the language is determined by the [`lang`](/en-US/docs/Web/HTML/Reference/Global_attributes/lang) attribute. Browsers will only hyphenate if this attribute is present and the appropriate hyphenation dictionary is available. The efficacy of `hyphens: auto` depends on the language being properly tagged to select the appropriate hyphenation rules. |
I thought it would be good to clarify what we mean by "auto", plus, really, we are talking about how effective it is, rather than some general behavior?
Member
Author
There was a problem hiding this comment.
i just moved the note down. I have to go down a rabbit hole now....
| In XML, the [`xml:lang`](/en-US/docs/Web/SVG/Reference/Attribute/xml:lang) attribute must be used. The specification does not define rules for how hyphenation is performed, so the exact hyphenation may vary from browser to browser. | ||
|
|
||
| ## Suggesting line break opportunities | ||
| The {{cssxref("hyphenate-character")}} property can be used to specify an alternative hyphenation character to use at the end of the line being broken. If you apply [`word-break: break-all`](/en-US/docs/Web/CSS/Reference/Properties/word-break#break-all) then no hyphens are shown, even if the word breaks at a hyphenation point. If you apply {{cssxref("text-wrap-mode","text-wrap-mode: nowrap")}}, no wrapping occurs so no hyphens will appear. |
Contributor
There was a problem hiding this comment.
"the end of the line being broken" is ambiguous. Do you mean the end of a sentence, or the point where a sentence breaks across two lines? Would be good to clarify.
Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>
estelle
commented
Jun 9, 2026
chrisdavidmills
approved these changes
Jun 10, 2026
chrisdavidmills
left a comment
Contributor
There was a problem hiding this comment.
All looks good now, thanks, @estelle!
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
added a description.
added text to the examples
de-notified as the text is just part of the description now