DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> css解決英文字符與阿位伯數字自動換行
css解決英文字符與阿位伯數字自動換行
編輯:CSS詳解     
word-wrap是控制換行的,可取:word-wrap:break-Word normal break-all keep-all

break-Word:它主要用來是控制是否將強制把單詞換行,對於中英中文沒有任何問題,但是對於長串的英文無效。

normal:英文單詞不被拆開,它是默認值。

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

keep-all,是指對於中、日、單詞之間不斷詞。即只用此時,不用Word-wrap,中文就不會換行了。(英文語句正常。)

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

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

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

最好的方式是 word-wrap:break-Word; overflow:hidden;

而不是 word-wrap:break-word; Word-break:break-all;

也不是 word-wrap:break-Word; overflow:auto;

(Firefox浏覽器)連續的英文字符和阿拉伯數字的斷行,Firefox的所有版本的沒有解決這個問題,我們只有讓超出邊界的字符隱藏或者,給容器添加滾動條


#wrap{Word-break:break-all; width:200px; overflow:auto;}

<div id="wrap">愛思資源網- 專注WEB前端開發與PHP編程設計</div>


XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved