欢迎访问本站·  我们将竭尽全力为您服务·  设计与开发、售后服务安全可靠!

项目经理· 服务热线:150-5696-8972 王工     售后热线:182-5605-6183 张工

庐江建站公司哪家好

您所在的位置: 网站首页 > 新闻动态 > 建站知识

CSS实现连续数字和英文的自动换行

发表日期:2013-05-28 03:40:28

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

  <div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>

  效果:可以实现换行

  2.(Firefox浏览器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条

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

  <div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>

  效果:容器正常,内容隐藏

对于table

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

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

  <tr><td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</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; ">abcdefghigklmnopqrstuvwxyz 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.(Firefox浏览器)在td,th中嵌套div,p等采用上面提到的对付Firefox的方法运行代码框。后,这种现象出现的几率很小。

        本技术由庐江网站建设公司提供,如有疑问请联系官方QQ!

上一篇:幸福邮局一天签出“爱情护照”10多本下一篇:网页上的QQ客服图标显示未启用的解决办法

品牌案例

  • 环巢湖旅游门户网

    运漕镇人民政府是乡镇一级人民政府,下设党政办公室、经济发展办公室和社会事务办公室三大办公室,辖国土资源所、计生服务所、农村经济服务中心、社会事业服务中心四个职能部门。

  • 合肥合锻机床股份有限公司

    三亚最爱婚纱摄影是最受欢迎的海南婚纱摄影公司,是三亚婚纱摄影行业中的领军品牌.为您提供专业的三亚婚纱摄影,海南旅游外景婚纱照以及最满意,最优质的服务.三亚婚纱摄影哪家好—三亚最爱婚纱打造新的视觉神话.真诚欢迎您光临三亚最爱婚纱旗舰店!

  • 安徽省交通科学研究院

    清华大学总裁班:汇集工商管理、资本运作、私募股权等管理培训班课程的高端总裁班,欢迎咨询报名!

  • 北京大学国学与管理研修中心

    北京大学,创立于1898年,初名京师大学堂,是中国中央政府设立的第一所大学,为中国近代正式设大学之始,其成立标志着中国近现代高等教育的开端,由此开创了中国的现代学制。

  • 中国科学技术大学 量子材料与光子技术实验室

    快房网是提供最全面最及时的杭州房地产、楼盘信息在线查询,买房卖房和二手房租售咨询服务的互动式房地产门户网站。查看买房、卖房、楼盘和房地产信息就上快房网

  • 中国科学技术大学 陆亚林教授

    科腾世界(上海)文化传播有限公司(以下简称科腾)主要从事文化交流,整案策划,营销策划,影视制作,媒体推广,平面设计等一系列商业及政府活动。

多一份参考,多一份选择,总有益处

请联系我们,免费获得专属《策划方案》及报价
咨询相关问题或预约面谈,可以通过以下方式与我们联系
24小时业务热线:150-5696-8972 王先生
在线客服
咨询热线-王工
150-5696-8972
扫码 - 微信沟通
7*24小时微信扫码咨询
售后热线-张工
182-5605-6183