大家都知道连续的英文或数字能是容器被撑大,不能根据容器的大小自动换行,优畅今天和大家聊聊,使下面是 CSS如何将他们换行的方法!
1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准。
#wrap{white-space:normal; width:200px; } 或者 #wrap{word-break:break-all;width:200px;} <div id="wrap">ddd111111111111111111111111111111</div>
效果:可以实现换行
2.(Firefox浏览器)white-space:normal; word-break:break-all;overflow:hidden;同样的FF下也没有很好的实现方法,只能隐藏或者加滚动条,当然不加滚动条效果更好!
#wrap{white-space:normal; width:200px; overflow:auto;} 或者 #wrap{word-break:break-all;width:200px; overflow:auto; } <div id="wrap">ddd1111111111111111111111111111111111111111</div>
效果:容器正常,内容隐藏
1. (IE浏览器)使用样式table-layout:fixed;
<style> .tb{table-layout:fixed} </style> <table class="tbl" width="80"> <tr><td> abcdefghigklmnopqrstuvwxyz 1234567890 </td></tr> </table>
效果:可以换行
2.(IE浏览器)使用样式
<style> .tb {table-layout:fixed} </style> <table class="tb" width="80"><tr><td nowrap> abcdefghigklmnopqrstuvwxyz 1234567890 </td></tr> </table>
效果:可以换行
3. (IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap
<style> .tb{table-layout:fixed} </style> <table class="tb" width=80> <tr> <td width=25% nowrap> abcdefghigklmnopqrstuvwxyz 1234567890 </td> <td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td> </tr> </table>
效果:两个td均正常换行
4.(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div
<style> .tb {table-layout:fixed} .td {overflow:hidden;} </style> <table class=tb width=80> <tr><td width=25% class=td nowrap> <div>abcdefghigklmnopqrstuvwxyz 1234567890</div> </td> <td class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td> </tr> </table>
这里单元格宽度一定要用百分比定义 效果:正常显示,但不能换行。
好了,到这里,优畅介绍完毕了,大家看看感觉有用,可以收藏!
拥有多年WordPress博客/企业建站开发经验,独树一帜的设计,提供最专业的网站设计方案;原创的主题标签语义化,增强网站优化效果。
增强用户体验、提高品牌形象给人留下深刻的印象,那就选择我们,我们的每一款主题都是独一无二的,都有自己的灵魂,每款主题都有各自的配色方案。
遵循现代网页设计的趋势,所有主题都提供完整的响应式布局,优化大桌面显示器以及对平板和智能手机的支持,从而提供一致性的用户体验。
长期及时地在线售后服务和免费升级更新,确保您的网站始终运行在最佳状态,24小时QQ在线的沟通方式免去您的后顾之忧,替您节省网站维护成本。
目前还没有评。