Display text lines in DIV and text lines in DIV

Display text lines in DIV and text lines in DIV

1.

<style>     div     {         white-space:normal;         word-break:break-all;         word-wrap:break-word;          }    </style> <div style=" width:100px; border:1px solid red">    I am a doibiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii    </div>

Effect before adding css: -------> + effect:

 

2. These three statements focus on: word-break and word-wrap.

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

Prompt: Use the word-break attribute to enable the browser to wrap a line at any position.

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.

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

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.

Let's look at the example:

<style>     div     {           word-wrap:break-word;          }    </style><div style=" width:100px; border:1px solid red">    I am a doibiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii    </div>

Result:

Use dobiiiiiiiiiiiiiiiiiii as a whole for line feed display.

 

<style>     div     {         word-break:break-all;                  }    </style><div style=" width:100px; border:1px solid red">    I am a doibiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii    </div>

Result:

Truncate dobiiiiiiiiiiiiiiiii for line feed display.

I think the difference between the two is clear!