CSS實現強制換行-------Day 78，css-------day

CSS實現強制換行-------Day 78，css-------day

其實最早的時候也考慮過這個問題，當時還在想需要判定文字的長度麼，實在是傻到極點了，原來CSS中本來就有這個樣式設定的。而今天正好看到了有這麼一篇介紹，仔細看了下，感覺還不錯，這裡也把實驗的結果記錄下。

初始階段：

<div style="width:200px;height:50px;background:yellow;">  comedycookidespitelovedescriptiondescription</div><div style="width:200px;height:50px;background:blue;">  四大四大四大阿艾弗森的法師打發第三方聖達達菲的馮紹峰打算打</div>

這時的效果是什麼呢，我們來看下：

這樣我們可以看出，如果是英文字元的話，就會超出div的邊界了，而漢字倒不會

解決辦法：

有兩個樣式設定是可以解決這個問題的，分別是word-wrap和world-break

先來看第一種word-wrap:break-word;的實現效果

1、加入英文語句時，如果加入後一個單詞會超出div範圍，則將整個單詞進行換行；

2、如果單詞過長，但是同一個單詞，它會進行斷開換行；

而world-break則有兩種方式，分別來看：

<div style="width:200px;height:50px;background:yellow;word-break:break-all;">i comedycookidespitelovedescriptiondescription</div><hr/><div style="width:200px;height:50px;background:blue;word-break:break-all;">四大 四大四大阿艾弗  森的法師打發第三方聖達達菲的馮紹峰打算打</div>

效果為：

1、後一個單詞加入後可能超出div邊界，先加入詞填滿div的寬度，超出的單詞部分剩餘的字母轉入下一行；

2、一個單詞超出的話就更不用說了，肯定會填滿寬度再轉入下一行唄。再來看第二種：

<div style="width:200px;height:50px;background:yellow;word-break:keep-all;">i comedycookidespitelovedescriptiondescription</div><hr/><div style="width:200px;height:50px;background:blue;word-break:keep-all;">四大 四大四大阿艾弗  森的法師打發第三方聖達達菲的馮紹峰打算打</div>

這種的效果又該如何呢，我們先來看下好了：

1、如果加入下一次後可能會超出邊界，那就將整個的下一個次換行；

2、單獨的一個單詞的話，會保持單詞的完整性，從而仍然可能會造成超出邊界的情況

其實三種方式裡我最喜歡的是第二種：word-break:break-all;可以將字串進行截斷，

而第一種同樣可以實現換行效果，在單個單詞長度都不長的情況下比較適用，word-wrap:break-word;

而第三種情況word-break:keep-all與第一種情況相似，卻又不同，如果存在過長單詞的話是無法實現效果的，所以不贊成使用來實現效果

就這樣又學到了點東西，心情不錯，開森..

CSS強制不換行，置中？

讓div置中，body的text-align得是center;
div設定好寬度，然後white-space:nowrap;overflow:hidden;
 
css，文字在內部換行問題

CSS強制換行/自動換行/強制不換行

一般情況下，在<div>或者<p>等盒子模型內，元素預設都會換行，預設樣式：white-space:normal，但也不排除特殊情況，比如測試人員，他們的習慣都很特別，於是我們就需要設定強制換行樣式。
強制換行：
word-break:break-all; /*支援IE，chrome，FF不支援*/
word-wrap:break-word;/*支援IE，chrome，FF*/

自動換行：
word-wrap: break-word;
word-break: normal;

強制不換行：
white-space:nowrap;

CSS設定不轉行:
overflow:hidden 隱藏
white-space：normal 預設
pre 換行和其他空白字元都將受到保護
nowrap 強制在同一行內顯示所有文本，直到文本結束或者遭遇 br 對象

設定強行換行
word-break:
normal ; 依照亞洲語言和非亞洲語言的文本規則，允許在字內換行
break-all : 　該行為與亞洲語言的normal相同。也允許非亞洲語言文本行的任意字內斷開。該值適合包含一些非亞洲文本的亞洲文本
keep-all : 　與所有非亞洲語言的normal相同。對於中文，韓文，日文，不允許字斷開。適合包含少量亞洲文本的非亞洲文本與之間的高度解決辦法

英文不換行
CSS裡加上 word-break: break-all; 問題解決。這個問題只有IE才有，在FF下測試,FF可以自己加捲軸，這樣也不影響效果
建議大家做Skin時，記得在body裡加 word-break: break-all; 這樣可以解決IE的架構被英文撐開的問題
以下引用word-break的說明, 注意word-break 是IE5+專有屬性
文法：
word-break : normal | break-all | keep-all
參數：
normal : 　依照亞洲語言和非亞洲語言的文本規則，允許在字內換行
break-all : 　該行為與亞洲語言的normal相同。也允許非亞洲語言文本行的任意字內斷開。該值適合包含一些非亞洲文本的亞洲文本
keep-all : 　與所有非亞洲語言的normal相同。對於中文，韓文，日文，不允許字斷開。適合包含少量亞洲文本的非亞洲文本
說明：
設定或檢索對象內文本的字內換行行為。尤其在出現多種語言時。
對於中文，應該使用break-all 。
對應的指令碼特性為wordBreak。請參閱我編寫的其他書目。
樣本：
div {word-break : break-all; }