趣文网 > 作文大全

如何使英语和连续数字的自动换行用CSS代码实现?

2020-11-18 20:05:01
相关推荐

应用CSS代码来让英文和连续数字实现自动换行关于自动换行,如果说是正常字符换行是比较容易的,那么连续数字和英文字符会把容器撑大,让人头疼,接下来长沙同文来和你讲一讲CSS是如何换行的? 像div,p等块级元素 ,正常文字的换行(亚洲文字和非亚洲文字)元素都是自动设定的white-space:normal,当定义了宽度之后就会自动实现换行:

正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义

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;}

长沙网站优化首选

目的实现可以换行

2.(Firefox浏览器)连续的阿拉伯数字和英文字符断行,Firefox的所有版本都没能解决这个问题,所以超出边界的字符将会被隐藏或给容器加滚动条

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

长沙网站优化首选

最终结果是内容隐藏,容器正常。

对于table 1. (IE浏览器)使用table-layout:fixed;强制table的宽度,多余内容会被隐藏起来

网站建设
效果:隐藏多余内容

2. (IE浏览器)在td,th中嵌套div,p等采用上面提到的div,p的换行方法

3.(IE浏览器)使用table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行

网站优化首选长沙网站优化首选
可以看到最终结果是可以换行

4.(Firefox浏览器)在td,th中嵌套div,p等采用上面提到的对付Firefox的方法运行代码框。最后,出现这种现象的概率很小。

5.(Firefox浏览器)使用table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行,使用overflow:hidden;隐藏超出内容,这里overflow:auto;无法起作用

网站建设>网站制作>网站优化网站建设
最后得到的结果是隐藏多于内容。

阅读剩余内容
网友评论
相关内容
延伸阅读
小编推荐

大家都在看

别了老师作文 找到属于自己的路作文 坚守原则作文 作文好标题 逆境作文800字 乐观的我作文600字左右 手机怎样制作文字图片 犯错的作文 我心中的榜样作文 朗读比赛作文400字 三年级作文大全50字 孔雀作文300字 打丫鬟屁屁作文3000字 美丽的生命作文600字 我的责任作文300字 一家人作文 关于创业的作文 游子吟改写成作文 观看演唱会作文 一百字的小作文 我的自画像600字作文 以给我什么为题的作文 蒜苗的生长过程作文 举手投足之间作文800字 关于麻辣烫的作文 藤条打屁股的作文 母爱的滋味作文 什么是下水作文 关于让的作文800字 关于我变成什么的作文