CSS強制英文、中文換行與不換行 強制英文換行

  1. word-break:break-all;只對英文起作用,以字母作為換行依據
  2. word-wrap:break-word; 只對英文起作用,以單詞作為換行依據
  3. white-space:pre-wrap; 只對中文起作用,強制換行
  4. white-space:nowrap; 強制不換行,都起作用
  5. white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不換行,超出部分隱藏且以省略號形式出現(部分瀏覽器支持)

代碼:
.p1{ word-break:break-all; width:150px;}/只對英文起作用,以字母作為換行依據/
.p2{ word-wrap:break-word; width:150px;}/--只對英文起作用,以單詞作為換行依據/
.p3{white-space:pre-wrap; width:150px;}/只對中文起作用,強制換行/
.p4{white-space:nowrap; width:10px;}/強制不換行,都起作用/
.p5{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100px;}//不換行,超出部分隱藏且以省略號形式出現/
注意,一定要指定容器的寬度,不然的話是沒有用的。

注意word-break 是IE5+專有屬性

語法:

word-break : normal | break-all | keep-all

參數:

normal :  依照亞洲語言和非亞洲語言的文本規則,允許在字內換行

break-all :  該行為與亞洲語言的normal相同。也允許非亞洲語言文本行的任意字內斷開。該值適合包含一些非亞洲文本的亞洲文本

keep-all :  與所有非亞洲語言的normal相同。對于中文,韓文,日文,不允許字斷開。適合包含少量亞洲文本的非亞洲文本

說明:

設置或檢索對象內文本的字內換行行為。尤其在出現多種語言時。

對于中文,應該使用break-all 。

注意,兼容火狐瀏覽器強制英文換行:
<div style="word-wrap:break-word; white-space:normal; word-break:break-all; width:150px;">英文內容</div>

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 深入理解傅里葉變換Mar 12, 2017 這原本是我在知乎上對傅立葉變換、拉普拉斯變換、Z變換的聯系?為什么要進...
    價值趨勢技術派閱讀 5,824評論 2 2
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    wzhiq896閱讀 1,806評論 0 2
  • word-wrap:normal | break-word; (內容換行) normal:默認的屬性值(允許內容頂...
    蘇星河閱讀 5,414評論 0 5
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    love2013閱讀 2,340評論 0 11
  • 當一個塊狀元素設置了寬度,并且其中的文本是根據接口返回的數據進行填充和展示時,因為傳輸的數據有可能是不可靠的,所以...
    lincimy閱讀 3,721評論 0 2