CSS換行：word-wrap、word-break和text-wrap差異

時間 2019-11-18

標籤 css 換行 word wrap break text 差異欄目 CSS 简体版

原文原文鏈接

1、word-wrap：贊成對長的不可切割的單詞進行切割並換行到下一行。(中英文處理效果同樣)css

word-wrap有兩個取值：html

一、word-wrap: normal：僅僅在贊成的斷字點換行（瀏覽器保持默認處理）。瀏覽器

二、word-wrap: break-word：在長單詞或 URL 地址內部進行換行。（即在容器末端有長單詞不能全然顯示，不會截斷單詞，而是做爲整體，本身主動換行）app

   1: <!DOCTYPE>

   2: <html lang="zh-en">

   3: <head>

   4:    <title>CSS換行</title>

   5:    <meta http-equiv="content-type" content="text/html;charset=utf-8">

   6:    <style type="text/css">

   7:            div{

   8:                padding: 0;

   9:                margin: 0 auto;

  10:                width: 200px;

  11:                height: 100px;

  12:                border: 1px solid red;

  13:            }

  14:    </style>

  15: </head>

  16: <body>

  17:   <div>

  18:       Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  19:   </div>

  20: </body>

  21: </html>

默認狀況下：ui

加入樣式：spa

   1: word-wrap:break-word;          //效果和上述同樣

2、word-break：規定非中日韓文本的換行規則。rest

(對中文正常換行，對英文依照例如如下說明處理)code

word-break有三個取值：orm

一、word-break: normal：使用瀏覽器默認的換行規則。htm

（等價於word-wrap: normal）

二、word-break: break-all：贊成在單詞內換行。（即在容器末端有長單詞不能全然顯示，會截斷單詞）

給div加入此規則

   1: word-break:break-all;

效果：對sit進行了截斷處理

三、word-break: keep-all：僅僅能在半角空格或連字符處換行。

爲了演示，在原文本的ipsum、dolor和sit之間增長一個連字符（-）

   1: <div>

   2:       Lorem ipsum-dolor-sit amet, consectetur adipiscing elit.

   3:   </div>

效果：在ipsum後產生了換行

3、text-wrap：規定文本的換行規則。

text-wrap是CSS3屬性，有4個取值：

一、text-wrap：normal：僅僅在贊成的換行點進行換行。

二、text-wrap：none：不換行。

元素沒法容納的文本會溢出。

三、text-wrap：suppress：壓縮元素中的換行。瀏覽器僅僅在行中沒有其它有效換行點時進行換行。

四、text-wrap：unrestricted：在隨意兩個字符間換行。

PS：眼下主流瀏覽器都不支持 text-wrap 屬性。

來源：http://www.ido321.com/621.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。