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

知更鳥
知更鳥
知更鳥
1528
文章
6915
評論
2011年6月10日19:19:33 28 31.9K

設計制作HTML時會遇到CSS強制英文、中文換行與不換行的問題,可以通過本文了解一下相關知識。

結構:

1.Transshipment Booking System is launched只對英文起作用,以字母作為換行依據

2.Transshipment Booking System is launched只對英文起作用,以單詞作為換行依據

3.Transshipment Booking System is launched只對中文起作用,強制換行

4.Transshipment Booking System is launched強制不換行,都起作用

5.不換行,超出部分隱藏且以省略號形式出現

5.不換行,超出部分隱藏且以省略號形式出現Transshipment Booking System is launched

代碼:

.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;}//*不換行,超出部分隱藏且以省略號形式出現*/

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;不換行,超出部分隱藏且以省略號形式出現

注意,一定要指定容器的寬度,不然的話是沒有用的。

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

語法:

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

參數:

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

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

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

說明:

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

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

weinxin
關于本站
分享交流WordPress經驗與技巧,關注前端設計與網站制作。僅用于功能演示。
最佳 CSS 框架 Web前端

最佳 CSS 框架

在構建網站時,使用 CSS 框架是一個實時的節省,因為它為您提供了每個網頁設計師和前端開發人員在制作網站時需要的工具。 CSS 框架是一個軟件框架,它允許使用 HTML/CSS 進行更簡單、更符合標準...
line-height安卓中不垂直居中 Web前端

line-height安卓中不垂直居中

設計響應式網頁,PC端和移動端的樣式兼容性,很讓人撓頭,最常見的就是文字垂直不居中,而且蘋果手機和安卓手機下表現也不盡相同,往往蘋果手機是垂直居中的,但在安卓機上字卻靠上了,總是差那么一像素,應該是安...
jQuery幻燈片插件:OWL Carousel Web前端

jQuery幻燈片插件:OWL Carousel

Owl Carousel 是一個強大、實用但小巧的 jQuery 幻燈片插件,它具有以下特點: 兼容所有瀏覽器 支持響應式 支持 CSS3 過度 支持觸摸事件 支持 JSON 及自定義 JSON 格式...
js實時獲取瀏覽器窗口大小 Web前端

js實時獲取瀏覽器窗口大小

js實時獲取瀏覽器窗口大小,我們可以使用addEventListener()方法來實現。該addEventListener()方法可以注冊事件處理程序以偵聽瀏覽器窗口resize事件,例如window...
匿名

發表評論

匿名網友 填寫信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

評論:28   其中:訪客  25   博主  3
    • elaphent elaphent 4

      收藏代碼,留著以后研究

      • 劉印博客 劉印博客 3

        收藏下,以后搞模板時可能會用到~

        • 莫也 莫也 6

          應用到2.5中了嗎?

          • 福橘 福橘 5

            老大我用你的風格很長時間了,如果方便的話給我的博客做個友情鏈接,我的博客排名、內容和流量都還不錯,麻煩你看下。www.fuozu.com

            • E視角 E視角 3

              問一下老大,我的logo設計好了,要在哪里傳上去呢,要改代碼不?
              另外我設置了首頁顯示8個文章,它還是顯示10個,應該怎么弄呢?
              一起問了,麻煩抽點時間解答一下,謝謝啦。

                • clairelume clairelume 6

                  @ E視角 覆蓋主題目錄下images/logo.png,首頁顯示10個文章,包含了兩篇最新文章

                • 飄無痕 飄無痕 5

                  這個必須收藏!

                  • 小灰 小灰 3

                    果斷圍觀~

                    • 瘦臉 瘦臉 0

                      這個東西好像很少用到的吧,弄的太精細了哈!

                      • yunqing yunqing 5

                        鳥哥,為了在我急需查找資料,而服務器卻恰恰在那時發生癱瘓或意外,我想將服務器上的wordpress還有數據庫同步到本地 ,怎么辦?

                          • 知更鳥 知更鳥

                            @ yunqing 本人技術有限,不過可以建議你到此提問
                            http://faq.wopus.org/

                              • yunqing yunqing 5

                                @ 知更鳥 鳥哥謙虛了,就像鳥哥的博客名字一樣,懂得的越多,反而覺得自己什么都不懂,其實是懂很多的;我參考了鳥哥的wordpress備份與恢復一文,只在本地備份了文章和目錄表單,數據全部備份以后在本地的wamp上有些設置指向服務器,運行不了!

                                • yunqing yunqing 5

                                  @ 知更鳥 原來知更鳥是導航鳥的意思,呵呵,理解錯了!

                                  • yunqing yunqing 5

                                    @ 知更鳥 知更鳥,英國國鳥,從來不做壞事,只用心唱歌!

                                      • 知更鳥 知更鳥

                                        @ yunqing 當初進一個群看人家都是動物名,所以我就改成這個…呵呵

                                  • 通信民工 通信民工 0

                                    恩,學習了,之前接觸的都是比較單一的,現在比較系統學習了。

                                    • OneDou OneDou 0

                                      Firefox 不支持啊。很悲劇。。

                                      • hit9 hit9 3

                                        代碼拿走了

                                        • 廣州佳和胃腸醫院 廣州佳和胃腸醫院 2

                                          收藏代碼啦,好好研究一下,感謝

                                          • kapu kapu 0

                                            希望作者把字體的陰影去掉看著好累哦

                                            • 111111111111 111111111111 0

                                              怎么不能注冊用戶

                                              • 188資訊 188資訊 1

                                                收藏了,留著研究

                                                • 穿衣搭配網 穿衣搭配網 0

                                                  呵呵這個很有用,在”標簽”、”鏈接”等地方都能用到。

                                                  • dddd dddd 0

                                                    f非官方fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

                                                    • PC云端醫院 PC云端醫院 3

                                                      文章當中,只有pre標簽里面的前臺明文鏈接不能換行,怎么試都無效,望支個高招!!!