Word-wrap and word-break

I. Word-wrap

1. browser support

All mainstream browsers support word-wrap attributes

2. Definition and usage

The word-wrap attribute allows long words or URLs to wrap into the next line.

Syntax

word-wrap: normal|break-word;

Value	Description
Normal	Wrap only at the allowed broken word points (the browser keeps processing by default ).
Break-word	Wrap a line in a long word or URL address.

 

 

 

*********************

1. Default display for div + span layout Browser

        .divOne {            width: 200px;            border: 2px solid blue;        }        .spanTwo {            color: red;        }

    <div class="divOne">        <span class="spanTwo">12341234324        </span>        <span>11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111        </span>        <span class="spanTwo">abcdef        </span>    </div>

Display result:

If you use the work-wrap attribute:

        .divOne {            width: 200px;            border: 2px solid blue;            word-wrap: break-word;        }

 

 

2. Word-break

1. browser support

All mainstream browsers support the work-break attribute.

2. Definition and usage

The word-break attribute specifies the handling method for automatic line feed.

Tip: You can use the word-break attribute to wrap a line at any position in the browser.

Default Value:	Normal
Inheritance:	Yes
Version:	Css3
Javascript Syntax:	Object. Style. wordbreak = "Keep-all"

 

 

 

 

Syntax

word-break: normal|break-all|keep-all;

Value	Description
Normal	Use the default line feed rule of the browser.
Break-all	Line breaks are allowed in words.
Keep-all	You can only wrap a line at a halfwidth space or a hyphen.

 

 

 

 

*********************

3. Use the word-break attribute

        .divOne {            width: 200px;            border: 2px solid blue;            word-break:break-all;        }

Display result:

 

Word-wrap and word-break