CSS properties - word-related

revision:

Content

word-break property word-spacing property word-wrap property

word-break property

top

- specifies how words should break when reaching the end of a line.

CSS syntax : word-break: normal | break-all | keep-all | break-word | initial | inherit;

Property values:

normal : default value. Uses default line break rules

break-all : to prevent overflow, word may be broken at any character

keep-all : word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as value "normal"

break-word : to prevent overflow, word may be broken at arbitrary points

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.wordBreak="break-all"

example: word-break property

word-break: normal (default):

Thisissomeveryveryverylong word. Words will break according to usual rules.

word-break: keep-all:

Thisissomeveryveryverylong word. This text will-break-at-hyphens.

word-break: break-all:

Thisissomeveryveryverylong word. This text will break at any character.

code: 
                    <div>
                        <h4>word-break: normal (default):</h4>
                        <p class="all Word-A">Thisissomeveryveryverylong word. Words will break according to usual rules.</p>
                        <h4>word-break: keep-all:</h4>
                        <p class="all Word-B">Thisissomeveryveryverylong word. This text will-break-at-hyphens.</p>
                        <h4>word-break: break-all:</h4>
                        <p class="all Word-C">Thisissomeveryveryverylong word. This text will break at any character.</p>
                    </div>
                    <style>
                        p.all {width: 10vw; border: 0.1vw solid #000000;}
                        p.Word-A {word-break: normal;}
                        p.Word-B {word-break: keep-all;}
                        p.Word-C {word-break: break-all;}
                    </style>

word-spacing property

top

- increases or decreases the white space between words. Negative values are allowed.

CSS syntax : word-spacing: normal | length | initial | inherit;

Property values:

normal : defines normal space between words (0.25em). This is default

length : defines an additional space between words (in px, pt, cm, em, etc). Negative values are allowed.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.wordSpacing="2vw"

example: word-spacing property

word-spacing: normal (default):

This is some text. This is some text.

word-spacing: 3vw:

This is some text. This is some text.

word-spacing: 1cm:

This is some text. This is some text

code: 
                    <div>
                        <h4>word-spacing: normal (default):</h4>
                        <p class="Word-D">This is some text. This is some text.</p>
                        <h4>word-spacing: 3vw:</h4>
                        <p class="Word-E">This is some text. This is some text.</p>
                        <h4>word-spacing: 1cm:</h4>
                        <p class="Word-F">This is some text. This is some text</p>
                    </div>
                    <style>
                        p.Word-D {word-spacing: normal;}
                        p.Word-E {word-spacing: 3vw;}
                        p.Word-F {word-spacing: 1cm;}
                    </style>

word-wrap property

top

- allows long words to be able to be broken and wrap onto the next line.

CSS syntax : ord-wrap: normal | break-word | initial | inherit;

Property values:

normal : break words only at allowed break points. This is default

break-word : allows unbreakable words to be broken

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.wordWrap="break-word"

example: word-wrap property

word-wrap: normal (default):

This div contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will not break and wrap to the next line.

word-wrap: break-word:

This div contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

code: 
                    <div>
                        <h4>word-wrap: normal (default):</h4>
                        <p class="all-1 Word-G">This div contains a very long word: thisisaveryveryveryveryveryverylongword. 
                        The long word will not break and wrap to the next line.</p>
                        <h4>word-wrap: break-word:</h4>
                        <p class="all-1 Word-H">This div contains a very long word: thisisaveryveryveryveryveryverylongword. 
                        The long word will break and wrap to the next line.</p>
                    </div>
                    <style>
                        p.all-1 {width: 15vw; border: 0.2vw solid black;}
                        p.Word-G {word-wrap: normal;}
                        p.Word-H {word-wrap: break-word;}
                    </style>