Let DIV Chinese text wrap and display_html/css_WEB-ITnose

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>

The effect before adding css: ------->With effect :

2. The key points of these three sentences are: word-break and word-wrap

a: word-break attribute regulations How to handle automatic line wrapping.

Tip: By using the word-break attribute, you can let the browser break a line at any position.

Value Description

normal

Use the browser's default line wrapping rules.

break-all

Allows line breaks within words.

keep-all

值 描述

normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。

Can only wrap at half-width spaces or hyphens.

b:word-wrap attribute allows long words or URL addresses to be wrapped to the next line.

值 描述

normal	只在允许的断字点换行（浏览器保持默认处理）。
break-word	在长单词或 URL 地址内部进行换行。

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:

Wrap dobiiiiiiiiiiiiiiiiiii as a whole show.

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

Result:

Truncate dobiiiiiiiiiiiiiiiiiii for newline display.

I think the difference between the two should be clear now!