標籤自動換行
阿新 • • 發佈：2018-12-05
標籤自動換行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文件</title> </head> <div> <span style="display:inline-block;width:60px;word-wrap:break-word;white-space:normal;">span標籤換行span標籤換span標籤換span標籤換</span> <br /> <span style="display:inline-block;width:10%;word-wrap:break-word;white-space:normal;">span標籤換行span標籤換span標籤換span標籤換</span> </div> <body> </body> </html>
1.首先把span變成塊級元素 display:inline-block
2.## 標題設定寬度，
一定保證寬度是一定的，百分數時，如果父級元素的寬度是可以改變的，那麼span的寬度隨之改變 width:10% width:60px
3.設定內容自動換行，word-wrap屬性
word-wrap有兩個取值：
1、word-wrap: normal：僅僅在同意的斷字點換行（瀏覽器保持預設處理）。
2、word-wrap: break-word：在長單詞或 URL 地址內部進行換行。（即在容器末端有長單詞不能全然顯示，不會截斷單詞，而是作為總體，自己主動換行）
4.設定空白的處理 ，white-space屬性
| 值 | 描述 |
|---|---|
| normal | 預設。空白會被瀏覽器忽略。 |
| pre | 空白會被瀏覽器保留。其行為方式類似 HTML 中的 標籤。 |
| nowrap | 文字不會換行，文字會在在同一行上繼續，直到遇到 標籤為止。 |
| pre-wrap | 保留空白符序列，但是正常地進行換行。 |
| pre-line | 合併空白符序列，但是保留換行符。 |
| inherit | 規定應該從父元素繼承 white-space 屬性的值。 |