css怎么控制两个字母,css英文字母数字自动换行且不断词方法
本文章來給各位同學介紹css怎樣讓英文字母數字自動換行且不斷詞方法總結,有需要了解的同學可進入參考。
當一個定義了寬度的塊狀元素中填充的全部為純英文或者純數字的時候,在IE和FF中都會撐大容器,不會自動換行
并且當數字或者英文中帶有漢字時,會從漢字處換行,而純漢字卻可以自動換行。這個問題如何解決?先來認識一下兩位主角word-wrap和word-break
word-break用來控制斷詞
三種取值:
(1)normal
(2)break-all(是斷開單詞。在單詞到邊界時,下個字母自動到下一行。主要解決了長串英文的問題。)
(3)keep-all
word-wrap用來控制換行
兩種取值:
(1)normal
(2)break-word(此值用來強制換行,內容將在邊界內換行,中文沒有任何問題,英文語句也沒問題。但是對于長串的英文,就不起作用。)
解決方法
可以在CSS中加入 代碼如下 復制代碼
word-wrap:break-word;
word-break:break-all;
.(Firefox瀏覽器)連續的英文字符和阿拉伯數字的斷行,Firefox的所有版本的沒有解決這個問題,我們只有讓超出邊界的字符隱藏或者,給容器添加滾動條 代碼如下 復制代碼
#wrap{word-break:break-all; width:200px; overflow:auto;}
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111效果:容器正常,內容隱藏
對于table
1. (IE瀏覽器)使用table-layout:fixed;強制table的寬度,多余內容隱藏 代碼如下 復制代碼
| abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss |
效果:隱藏多余內容
2.(IE瀏覽器)使用table-layout:fixed;強制table的寬度,內層td,th采用word-break : break-all;或者word-wrap : break-word ;換行 代碼如下 復制代碼
| abcdefghigklmnopqrstuvwxyz 1234567890 | abcdefghigklmnopqrstuvwxyz 1234567890 |
效果:可以換行
例子 代碼如下 復制代碼
SS英文對齊:
¨Crepower¨ Brand Belts, Chains and other Transmission Parts are manufactured under ISO9001 certified quality-control system. With improved quality material and well-organized production procedures, ¨Crepower¨ power transmission products have noticeably fatigue strength and long-service life.We can supply all types and sizes according to the related standards and customers’ requirements and總結
以上是生活随笔為你收集整理的css怎么控制两个字母,css英文字母数字自动换行且不断词方法的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 3D环动画css3实现,CSS3 3D酷
- 下一篇: 月是故乡明读后感50字