澳洲幸运5直播天天计划

核彈頭H5小游戲

關閉

核彈頭小游戲

游戲輕松點
無需下載,點開即玩

拿起手機!掃我啊

核彈頭小游戲
無需下載點擊即玩

回到頂部

當前位置: 核彈頭首頁 > 游戲教程 > 正文

html5文字自動換行怎么設置

來源:www.kseom.com.cn    作者:集   時間:2016-06-03

html5文字自動換行的問題讓不少小伙伴很是棘手,到底怎么解決呢?一起來看看吧!

自動換行問題,正常字符的換行是比較合理的,而連續的數字和英文字符常常將容器撐大,讓人頭疼,下面介紹的是如何實現換行的方法:

對于div,p等塊級元素

正常文字的換行(亞洲文字和非亞洲文字)元素擁有默認的 white-space:normal ,當定義的寬度之后自動換行

html:

div id="wrap"正常文字的換行(亞洲文字和非亞洲文字)元素擁有默認的white-space:normal,當定義/div

css:

#wrap{white-space:normal; width:200px; }

1.(IE瀏覽器)連續的英文字符和阿拉伯數字,使用word-wrap : break-word ;或者word-break:break-all;實現強制斷行

#wrap{word-break:break-all; width:200px;}

或者

#wrap{word-wrap:break-word; width:200px;}

html:

div id="wrap"

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

/div

效果:可以實現換行

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

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

html:

div id="wrap"

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

/div

效果:容器正常,內容隱藏

對于table

1. (IE瀏覽器)使用 table-layout:fixed;強制table的寬度,多余內容隱藏

table style="table-layout:fixed" width="200"

tr

tdabcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss

/td

/tr

/table

效果:隱藏多余內容

2.(IE瀏覽器)使用 table-layout:fixed;強制table的寬度,內層td,th采用word-break : break-all;或者word-wrap : break-word ;換行

table width="200" style="table-layout:fixed;"

tr

td width="25%" style="word-break : break-all; "

abcdefghigklmnopqrstuvwxy 1234567890

/td

td style="word-wrap : break-word ;"

abcdefghigklmnopqrstuvwxyz 1234567890

/td

/tr

/table

效果:可以換行

3. (IE瀏覽器)在td,th中嵌套div,p等采用上面提到的div,p的換行方法 ( 技巧 )

4.(Firefox瀏覽器)使用 table-layout:fixed;強制table的寬度,內層td,th采用word-break : break-all;或者word-wrap : break-word ;換行,使用overflow:hidden;隱藏超出內容,這里overflow:auto;無法起作用

table style="table-layout:fixed" width="200"

tr

td width="25%" style="word-break : break-all; overflow:hidden; "

abcdefghigklmnopqrstuvwxyz1234567890

/td

td width="75%" style="word-wrap : break-word; overflow:hidden; "

abcdefghigklmnopqrstuvwxyz1234567890

/td

/tr

/table

以上便是小編為您帶來的全部內容了,大家自己注意加上<>哦。

核彈頭小游戲網發布此文僅為傳遞信息,不代表認同其觀點或者證實其描述!
澳洲幸运5直播天天计划