1. 程式人生 > >關於換行:word-wrap同word-break的區別

關於換行:word-wrap同word-break的區別

總結如下:

word-wrap是控制換行的。

使用break-word時,是將強制換行。中文沒有任何問題,英文語句也沒問題。但是對於長串的英文,就不起作用。

break-word是控制是否斷詞的。

normal是預設情況,英文單詞不被拆開。

break-all,是斷開單詞。在單詞到邊界時,下個字母自動到下一行。主要解決了長串英文的問題。

keep-all,是指Chinese, Japanese, and Korean不斷詞。即只用此時,不用word-wrap,中文就不會換行了。(英文語句正常。)

ie下:

使用word-wrap:break-word;所有的都正常。

ff下:

如這2個都不用的話,中文不會出任何問題。英文語句也不會出問題。但是,長串英文會出問題。

為了解決長串英文,一般用word-wrap:break-word;word-break:break-all;。但是,此方式會導致,普通的英文語句中的單詞會被斷開(ie下也是)。

目前主要的問題存在於 長串英文 和 英文單詞被斷開。其實長串英文就是一個比較長的單詞而已。

即英文單詞應不應該被斷開那?那問題很明顯了,顯然不應該被斷開了。

對於長串英文,就是惡意的東西,自然不用去管了。但是,也要想些辦法,不讓它把容器撐大。

用:overflow:auto; ie下,長串會自動折行。ff下,長串會被遮蓋。

所以,綜上,最好的方式是word-wrap:break-word;overflow:hidden;而不是word-wrap:break- word;word-break:break-all;。

word-wrap:break-word;overflow:auto;在ie下沒有任何問題。在ff下,長串會被遮住部分內容。

另,測試程式碼如下:

以下為引用的內容:

1.htm===================================================================

<style>
.c1{ width:300px; border:1px solid red}
.c2{ width:300px;word-wrap:break-word; border:1px solid yellow}
.c3{ width:300px;word-wrap:break-word;word-break:break-all; border:1px solid green}
.c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
.c5{ width:300px;word-break:break-all; border:1px solid black}
.c6{ width:300px;word-break:keep-all; border:1px solid red}
.c7{ width:300px;word-wrap:break-word;overflow:auto; border:1px

solid yellow}
</style>

.c1{ width:300px; border:1px solid red}
<div class="c1">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c1>
This is all English. This is all English. This is all English.
</div>
<div class=c1>
全是中文的情況。全是中文的情況。全是中文的情況。
</div>
<div class=c1>
中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.
</div>

<br>
.c2{ width:300px;word-wrap:break-word; border:1px solid yellow}
<div class="c2">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c2>
This is all English. This is all English. This is all English.
</div>
<div class=c2>
全是中文的情況。全是中文的情況。全是中文的情況。
</div>
<div class=c2>
中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.
</div>

<br>
.c3{ width:300px;word-wrap:break-word;word-break:break-all; border:1px solid green}
<div class="c3">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c3>
This is all English. This is all English. This is all English.
</div>
<div class=c3>
全是中文的情況。全是中文的情況。全是中文的情況。
</div>
<div class=c3>
中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.
</div>

<br>
.c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
<div class="c4">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c4>
This is all English. This is all English. This is all English.
</div>
<div class=c4>
全是中文的情況。全是中文的情況。全是中文的情況。
</div>
<div class=c4>
中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.
</div>

<br>
.c5{ width:300px;word-break:break-all; border:1px solid black}
<div class="c5">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c5>
This is all English. This is all English. This is all English.
</div>
<div class=c5>
全是中文的情況。全是中文的情況。全是中文的情況。
</div>
<div class=c5>
中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.
</div>

<br>
.c6{ width:300px;word-break:keep-all; border:1px solid red}
<div class="c6">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c6>
This is all English. This is all English. This is all English.
</div>
<div class=c6>
全是中文的情況。全是中文的情況。全是中文的情況。
</div>
<div class=c6>
中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.
</div>

<br>
.c7{ width:300px;word-wrap:break-word;overflow:auto; border:1px solid yellow}
<div class="c7">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c7>
This is all English. This is all English. This is all English.
</div>
<div class=c7>
全是中文的情況。全是中文的情況。全是中文的情況。
</div>
<div class=c7>
中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.
</div>

相關推薦

關於word-wrapword-break區別

總結如下:word-wrap是控制換行的。使用break-word時,是將強制換行。中文沒有任何問題,英文語句也沒問題。但是對於長串的英文,就不起作用。break-word是控制是否斷詞的。normal是預設情況,英文單詞不被拆開。break-all,是斷開單詞。在單詞到邊界

table td 內容太長自動的例項(word-wrapword-break的差異)

參考文件 :   table-layout  : http://www.w3school.com.cn/cssref/pr_tab_table-layout.asp word-wrap 和 word-brak的差異:  http://www.cnblogs.com/2050

css 長單詞不溢位容器的解決方法 word-wrapword-break

這兩個東西是什麼,我相信至今還有很多人搞不清,只會死記硬背的寫一個word-wrap:break-word;word-break:break-all;這樣的東西來強制斷句,又或者是因為這兩個東西實在是太拗口了,長得又差不多,導致連背都很難背下來。 那它們到底是什麼呢?我在m

單詞太長導致自動,出現空白區域。——word-wrapword-break(英文單詞

寫在前面: 在寫頁面的時候,偶爾有時會遇到下圖這兩種情況,一種是單詞過長時會溢位div,一種是直接換行,導致出現空白區域。這兩個情景就需要word-wrap、word-break這兩個屬性出場來解決了。閒話不扯了,本文主要內容有:word-wrap和word-

不同瀏覽器下word-wrapword-break強制

        我們一般控制換行所用到的CSS屬性一共有三個:word-wrap; word-break; white-space。這三個屬性可以說是專為了文字斷行而創造出來的。首先我們得知道這三個屬性到底是做什麼用地: word-wrap語法:         word-wrap: normal(預設)

white-space、word-wrapword-break 字母 數字不問題

實現頁面的文字、字母的展示效果的時候,相信大家都會遇到過一些這樣的要求:“文字不能換行,要強制文字一行展示”或者是“字母不會自動換行,需要實現可以自動換行斷句”等等諸如此類的要求,現在就這個文字、字母換不換行的問題,說說這三個css屬性的巧妙運用:white-space、

你真的了解word-wrapword-break區別嗎?

導致 within opera developer 不起作用 溢出 了解 gpo 有一個 這兩個東西是什麽,我相信至今還有很多人搞不清,只會死記硬背的寫一個word-wrap:break-word;word-break:break-all;這樣的東西來強制斷句,又或者是因

word-wrapword-break區別,以及無效情況

OS 自動 class word-wrap 就是 con 整體 tro ace 兩種方法的區別說明: 1,word-break:break-all 例如div寬400px,它的內容就會到400px自動換行,如果該行末端有個英文單詞很長(congratulation等),它會

word-breakword-wrap的使用和區別

問題起源: 中文是一個字就是一個單詞,而英文字母要有一個空格才將他們分割為一個單詞;文字換行沒事,主要是英文 <!DOCTYPE html><html><head><style> p.test1{ width:11em; border:1px

屬性word-wrapword-break區別

word-wrap 強調的是是否允許單詞內斷句,而word-break強調的則是怎麼樣來進行單詞內的斷句。 說到這裡,好像依然不是很明朗,好吧,表達能力差的孩紙真是傷不起啊,只能用些例項來補救了。 首先,何謂單詞內斷句?當然這裡指的都是西文單詞。 這是沒有單詞內斷句的情況

常見樣式問題七、word-breakword-wrap、white-space區別

首先推薦下MDN網站,在上面可以學習html、css、js。對於css而言,可以檢視詳細的語法、使用案例、瀏覽器相容性。附上鍊接:https://developer.mozilla.org/zh-CN。一、基本介紹1、word-breakMDN上顯示語法:normal | b

word-wrapword-break和white-space

1、先要明確一點,不加word-wrap或word-break的時候,就是瀏覽器預設的時候,如果有一個單詞很長,導致一行中剩下的空間已經放不下它時,則瀏覽器會把這個單詞挪到下一行去: 2、這個長單詞還不算變態的,因為至少它沒有長到超過包裹它的元素的長度,但是如果超過了的話

你瞭解word-wrapword-break區別嗎?

       我想很多人會在想這兩個東西是什麼鬼東西,我相信至今還有很多人搞不清,只會死記硬背的寫一個word-wrap:break-word;word-break:break-all;這樣的東西來強制斷句,又或者是因為這兩個東西實在是太拗口了,長得又差不多,導致連背都很難

回車(CR)與(LF), '\r'和'\n'的區別

一:回車”(Carriage Return)和“換行”(Line Feed)起源       首先,弄清兩個概念:                     回車CR-將游標移動到當前行的開頭。                    換行LF-將游標“垂直”移動到下一行。(而並不移動到下一行的開頭,即不改變游標

回車(CR,'\r')和符(LF, '\n')的區別

區別 1. 回車CR-將游標移動到當前行的開頭。 為十進位制ASCII程式碼是13, 十六進位制程式碼為0x0D; 2. 換行LF-將游標“垂直”移動到下一行。(而並不移動到下一行的開頭,即不改變游標水平位置) ASCII程式碼是10, 十

C++中符‘\n’和控制符‘endl’的區別(cout和printf區別

1.顯示字串時,在字串中包含換行符,而不是在末尾加上endl,可以減少輸入量 2.如果生成一個空行,則兩種方法的輸入量相同,但對大多數人而言輸入endl更為方便 3.顯示引號括起來的字串通常使用換行符

css 英文 css(word-wrap/break)使純英文數字自動

並且 斷開 自動換行 英文數字 兩種 強制換行 pan all ane 問題 當一個定義了寬度的塊狀元素中填充的全部為純英文或者純數字的時候,在IE和FF中都會撐大容器,不會自動換行並且當數字或者英文中帶有漢字時,會從漢字處換行,而純漢字卻可以自動換行。這個問題如何解決?先

不同瀏覽器下word-wrap,word-break,white-space強制和不總結

強制換行與強制不換行用到的屬性 我們一般控制換行所用到的CSS屬性一共有三個:word-wrap; word-break; white-space。這三個屬性可以說是專為了文字斷行而創造出來的。首先我們得知道這三個屬性到底是做什麼用地: word-wrap語法: word-wrap: normal(預設

word-wrap:break-word 在各瀏覽器相容的問題

  今天做專案碰到個問題,jsp頁面的td內容過長會覆蓋table下其他的td內容,原先是在table標籤加     <table  style="table-layout:fixed"> td標籤加     <td style="word-wrap:br

div中文字超長的神器word-break:break-all;

今天想在div中輸出一些文字,發現文字多的時候換行是從中文和英文中間換行的。 忽然感覺很神奇! 後來度娘發現一個很神奇的東西:word-break:break-all;完美的解決了我的問題。 後來查閱了官方文件: 試了一下,只有break-all能夠粗暴的進行換行,I