CSS properties - hyphens

revision:

hyphens property

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

CSS syntax : hyphens: none | manual | auto | initial | inherit;

Property values:

none : words are not hyphenated

manual : default. Words are only hyphenated at ‐ or ­ (if needed)

auto : words are hyphenated where the algorithm is deciding (if needed)

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.hyphens="none"

example: hyphens property

hyphens: none

No hyphen; overflow if needed.

A veryvery­very long word.

hyphens: manual

Hyphen only at ‐ or ­ (if needed).

A veryvery­very long word.

hyphens: auto

Hyphen where the algorithm is deciding (if needed).

A veryvery­very long word.
code: 
                    <div>
                        <h4>hyphens: none</h4>
                        <p>No hyphen; overflow if needed.</p>
                        <div class="a one">A veryvery­very long word.</div>
                        <h4>hyphens: manual</h4>
                        <p>Hyphen only at ‐ or ­ (if needed).</p>
                        <div class="b one">A veryvery­very long word.</div>
                        <h4>hyphens: auto</h4>
                        <p>Hyphen where the algorithm is deciding (if needed).</p>
                        <div class="c one">A veryvery­very long word.</div>
                    </div>
                    <style>
                        div.one {width: 5.5vw; border: 0.1vw solid black;}
                        div.a {-webkit-hyphens: none; -ms-hyphens: none; hyphens: none;}
                        div.b {-webkit-hyphens: manual; -ms-hyphens: manual; hyphens: manual;}
                        div.c {-webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}
                    </style>