轉(zhuǎn)自 >>--- https://www.cnblogs.com/cqlb/p/9647548.html
- 當(dāng)我們?cè)O(shè)置div，或者其它文本框固定寬度之后，文本內(nèi)容過多就會(huì)文本溢出（顯示在區(qū)域外面，不換行的情況），有以下的三個(gè)屬性可以解決問題：
- word-break 屬性規(guī)定自動(dòng)換行的處理方法。
| 值 | 描述 |
|---|---|
| normal | 使用瀏覽器默認(rèn)的換行規(guī)則。 |
| break-all | 允許在單詞內(nèi)換行。 |
| keep-all | 只能在半角空格或連字符處換行。 |
- overflow 屬性規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情。
| 值 | 描述 |
|---|---|
| visible | 默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。 |
| hidden | 內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見的。 |
| scroll | 內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。 |
| auto | 如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值。 |
- white-space 屬性設(shè)置如何處理元素內(nèi)的空白。
| 值 | 描述 |
|---|---|
| normal | 默認(rèn)。空白會(huì)被瀏覽器忽略。 |
| pre | 空白會(huì)被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標(biāo)簽。 |
| nowrap | 文本不會(huì)換行，文本會(huì)在在同一行上繼續(xù)，直到遇到標(biāo)簽為止。 |
| pre-wrap | 保留空白符序列，但是正常地進(jìn)行換行。 |
| pre-line | 合并空白符序列，但是保留換行符。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 white-space 屬性的值。 |
- 推薦中文內(nèi)容使用 word-break:break-all 來實(shí)現(xiàn)文本的換行
- 使用 overflow 會(huì)出滾動(dòng)條，如果是允許有滾動(dòng)條可以使用
- white-space 屬于文本里的空白字符，含有多個(gè)空白字符可以使用
