CSS property hyphens

Hyphens, In normal English the main purpose of hyphens is to control the splitting of words onto two lines.This improve the layout of text when wrapping lines.

 

In CSS also we can use hyphens, by hyphens property of CSS. You can control the working of hyphens like-
you can disable hyphens if you not required
you can enable hyphen and
You can enable it when certain characters are present.

 

One Important thing we have to remember before using hyphens property that its is language dependent. If you will not declare lang attribute then hyphen property will not work because each language has its own rules for hyphenation which control appropriate hyphenation points in words. So you must specify a language using the lang HTML attribute.

 

Declare lang attribute on HTML tag:-

<html lang=”en”>

 

Syntax

hyphens: none;
hyphens: manual;
hyphens: auto;/* Global values */
hyphens: inherit;
hyphens: initial;
hyphens: unset;

 

Rules

Initial value manual
Applies to all elements
Inherited yes
Media visual
Computed value as specified
Animatable no
Canonical order the unique non-ambiguous order defined by the formal grammar

 

Hyphens values

hyphens : none

Words will never break or hyphenate at line breaks, even if characters inside the word suggest where hyphenation could or should go. Words broken by setting the word-break or word-wrap properties also won’t be hyphenated.Lines will only wrap at white spaces.

 

 

 

hyphens : manual

Words are only broken at line breaks where there are characters inside the word that suggest line break opportunities. There are two Unicode characters that suggest line break:

U+2010 (HYPHEN)
The “hard” hyphen character indicates a visible line break opportunity. Even if the line is not actually broken at that point, the hyphen is still rendered.

U+00AD (SHY)
A “soft” hyphen. This character is not rendered visibly; instead, it suggests a place where the browser might choose to break the word if necessary. In HTML, you can use ­ to insert a soft hyphen.

 

 

 

hyphens : auto

Words may be broken at appropriate hyphenation points either as determined automatically by a language-appropriate hyphenation resource or as determined by hyphenation characters inside the word. Manually-defined hyphenation characters inside a word (see above), if present, it will take priority over automatically determining hyphenation within the word.

 

 

 

Browser compatibility

 

Conclusion

Hope it will be helpful!

 

Ajay Malhotra

UI Developer & Designer

Leave a Reply

Your email address will not be published. Required fields are marked *