利用CSS實現純英文數字自動換行

來源:互聯網
上載者:User
下面為大家帶來一篇CSS代碼使純英文數字自動換行的簡單實現。內容挺不錯的,現在就分享給大家,也給大家做個參考。

當一個定義了寬度的塊狀元素中填充的全部為純英文或者純數位時候,在IE和FF中都會撐大容器,不會自動換行

並且當數字或者英文中帶有漢字時,會從漢字處換行,而純漢字卻可以自動換行。這個問題如何解決?先來認識一下兩位主角word-wrap和word-break

word-wrap用來控制css換行

兩種取值:

(1) normal
(2) break-word
(此值用來強制換行,內容將在邊界內換行,中文沒有任何問題,英文語句也沒問題。但是對於長串的英文,就不起作用。)

word-break用來控制斷詞

三種取值:

(1)normal

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

(3)keep-all(是指Chinese, Japanese, and Korean不斷詞,一句話一行,可以用來排列古詩喲~)

【解決方案】

可以在CSS中加入

word-wrap:break-word;word-break:break-all;

以上就是本文的全部內容,希望對大家的學習有所協助,更多相關內容請關注topic.alibabacloud.com!

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.