99热这里都是精品,久久毛片,国产亚洲欧美日韩精品一区二区三区

訂閱本欄目 RSS您所在的位置: 深山工作室 > DIV+CSS > 正文

CSS中word-wrap屬性同word-break屬性的兩者在中英文混排時的區(qū)別

天極網(wǎng) 2007/12/12 21:25:59 深山行者字體:大中小瀏覽 11037

本文列舉了兼容 IE 和 FF 的換行 CSS 推薦樣式，詳細介紹了word-wrap同word-break的區(qū)別。

　　兼容 IE 和 FF 的換行 CSS 推薦樣式

　　最好的方式是

以下是引用片段：
　　word-wrap:break-word; overflow:hidden;

　　而不是

以下是引用片段：
　　word-wrap:break-word; word-break:break-all;

　　也不是

以下是引用片段：
　　word-wrap:break-word; overflow:auto;

　　在 IE 下沒有任何問題，在 FF 下，長串英文會被遮住超出的內容。

　　word-wrap同word-break的區(qū)別

　　word-wrap:

　　normal　 Default. Content exceeds the boundaries of its container.

　　break-word Content wraps to next line, and a word-break occurs when necessary. 必要時會觸發(fā)word-break。

　　word-break:

　　normal　 Default. Allows line breaking within words. 好像是只對Asian text起作用。

　　break-all Behaves the same as normal for Asian text, yet allows the line to break arbitrarily for non-Asian text. This value is suited to Asian text that contains some excerpts of non-Asian text.

　　keep-all Does not allow word breaking for Chinese, Japanese, and Korean. Functions the same way as normal for all non-Asian languages. This value is optimized for text that includes small amounts of Chinese, Japanese, or Korean.

　　總結如下：

　　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">asdasd

</div>

　　<div class=c1>

　　This is all English. This is all English. This is all English.

　　</div>

　　<div class=c1>

　　全是中文的情況。全是中文的情況。全是中文的情況。

　　</div>

　　中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.

　　</div>

　　<br>

　　.c2{ width:300px;word-wrap:break-word; border:1px solid yellow}

　　safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

　　</div>

　　This is all English. This is all English. This is all English.

　　</div>

　　全是中文的情況。全是中文的情況。全是中文的情況。

　　</div>

　　中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.

　　</div>

　　<br>

　　.c3{ width:300px;word-wrap:break-word;word-break:break-all;　 border:1px solid green}

　　safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

　　</div>

　　This is all English. This is all English. This is all English.

　　</div>

　　全是中文的情況。全是中文的情況。全是中文的情況。

　　</div>

　　中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.

　　</div>

　　<br>

　　.c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}

　　safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

　　</div>

　　This is all English. This is all English. This is all English.

　　</div>

　　全是中文的情況。全是中文的情況。全是中文的情況。

　　</div>

　　中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.

　　</div>

　　<br>

　　.c5{ width:300px;word-break:break-all;　 border:1px solid black}

　　safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

　　</div>

　　This is all English. This is all English. This is all English.

　　</div>

　　全是中文的情況。全是中文的情況。全是中文的情況。

　　</div>

　　中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.

　　</div>

　　<br>

　　.c6{ width:300px;word-break:keep-all;　 border:1px solid red}

　　safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

　　</div>

　　This is all English. This is all English. This is all English.

　　</div>

　　全是中文的情況。全是中文的情況。全是中文的情況。

　　</div>

　　中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.

　　</div>

　　<br>

　　.c7{ width:300px;word-wrap:break-word;overflow:auto;　 border:1px solid yellow}

　　safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

　　</div>

　　This is all English. This is all English. This is all English.

　　</div>

　　全是中文的情況。全是中文的情況。全是中文的情況。

　　</div>

　　中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.

　　</div>

前一頁:css里expression實現(xiàn)界面對象的批量控制

后一頁:利用CSS中的Clip屬性來創(chuàng)造各種多彩的文字

相關閱讀: 吉林省天馬旅行社; 啟動旅行社管理系統(tǒng)3.0的開發(fā)服務; CSS關于box（盒模式）的一系列問題詳解; 了解html基礎知識之html標簽集合; Demo_隨機顯示圖片; 河南省中國青年旅行社; document對象詳解; 網(wǎng)站已經(jīng)整理了整站下載失效問題

共有0條關于《CSS中word-wrap屬性同word-break屬性的兩者在中英文混排時的區(qū)別》的評論: 發(fā)表評論

正在加載評論......

返回頂部發(fā)表評論

呢稱:
表情:
內容:	評論內容:不能超過 1000 字,需審核,請自覺遵守互聯(lián)網(wǎng)相關政策法規(guī)。
驗證碼:

網(wǎng)友評論聲明,請自覺遵守互聯(lián)網(wǎng)相關政策法規(guī)。

您發(fā)布的評論即表示同意遵守以下條款:
一、不得利用本站危害國家安全、泄露國家秘密,不得侵犯國家、社會、集體和公民的合法權益;
二、不得發(fā)布國家法律、法規(guī)明令禁止的內容;互相尊重,對自己在本站的言論和行為負責;
三、本站對您所發(fā)布內容擁有處置權。

更多信息>>欄目類別選擇: 百度小程序開發(fā); 微信小程序開發(fā); 微信公眾號開發(fā); uni-app; asp函數(shù)庫; ASP; DIV+CSS; HTML; python

更多>>同類信息: jquery設置或獲取修改classname; 利用css3.0寫出一個音樂播放的唱片碟盤的效果; 利用css中的scale()實現(xiàn)放大縮小效果; 利用background-color:#000000a8在背景顏色16進制代碼之后加字母加上數(shù)字讓背景色透明; css背景使用base64編碼或者將base64編碼放在img圖片標簽中; 利用css3中的-webkit-font-smoothing把網(wǎng)頁文字的毛邊去掉

更多>>最新添加文章: dw里面查找替換使用正則刪除sqlserver里面的CONSTRAINT; Android移動端自動化測試：使用UIAutomatorViewer與Selenium定位元素; 抖音直播音掛載小雪花懂車帝小程序; javascript獲取瀏覽器指紋可以用來做投票; 火狐Mozilla Firefox出現(xiàn)：無法載入您的Firefox配置文件它可能已經(jīng)丟失或是無法訪問問題解決集合處理辦法; 在Android、iOS、Windows、MacOS中微信小程序的文件存放路徑; python通過代碼修改pip下載源讓下載庫飛起; python里面requests.post返回的res.text還有其它的嗎

更多>>隨機抽取信息: 記錄滾動條位置; uni-app 搜索、歷史記錄功能簡單實現(xiàn); 經(jīng)常使用到有關數(shù)據(jù)庫的操作sql; 耒陽華天國際旅行社; 國內網(wǎng)站常用的一些 CDN 靜態(tài)資源公共庫加速服務; 偏重于汽車租賃服務商建站解決方案

更多標簽熱門標簽

圓角瀏覽器 dt 列淘寶 instr js 斷線顏色數(shù)組首字母提交文字樣式高度全選注冊表界面拼音自適應濾鏡 shift 臺歷用戶體驗 font-size 文件 dreawmeaver 對聯(lián) position float 商城 function 垂直 ewebeditor JS效果 em onload 關鍵詞程序 Google 2003 form 變大火狐間隔增大策劃 iframe 復制還原上傳

99热热热_国产成人自拍一区_欧美一级网站_99热在线播放_国产精品乱码一区二区三区_久久精品国产一区二区三区

CSS中word-wrap屬性同word-break屬性的兩者在中英文混排時的區(qū)別