★→ASP程序学习群:62655404 微信公众号开发
订阅本栏目 RSS您所在的位置: 深山工作室 > DIV+CSS学习 > 正文

DIV+CSS之自动换行

http://www.cnscn.org 2008/4/23 23:28:13 深山行者 字体:  浏览 11249 我要评论
自动换行问题,正常字符的换行是比较合理的,而连续的数字和 英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法

对于div,p等块级 元素

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

html
<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字) 元素拥有默认的white-space:normal,当定义</div>
css
#wrap{white-space:normal; width:200px; }

IE浏览器

连续的 英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行

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

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

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

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

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

对于table 元素
IE浏览器
1. 使用 table-layout:fixed;强制table的宽度,多余 内容隐藏
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
</td>
</tr>
</table>

2. 使用 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.在td,th中嵌套div,p等采用上面提到的div,p的换行方法

Firefox浏览器

1. 使用 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>

2.在td,th中嵌套div,p等采用上面提到的对付Firefox的方法

最后,这种现象出现的几率很小,但是不能排除网友的恶搞。如果有什么问题请回复,预览提到的例子的效果
相关阅读
( 2020/11/20 21:47:17 )asp无限级调用分类显示
( 2020/11/5 13:32:29 )利用css中的scale()实现放大缩小效果
( 2020/9/27 16:09:39 )uni-app实现tab选项卡
( 2020/9/25 22:35:17 )uni-app的父与子页面传递参数之属性Props字段类型讲解
( 2020/9/23 14:18:01 )uni-app设置像页面html或者body的全局背景色
( 2020/9/15 15:45:46 )uniapp的rich-text组件注入的a标签点击跳转处理
( 2020/9/15 15:27:24 )uni-app与HTML的标签变化对比
( 2020/8/10 14:37:08 )jquery实现移动端下拉加载刷新更多信息
共有0条关于《DIV+CSS之自动换行》的评论
发表评论
正在加载评论……
返回顶部发表评论
呢 称:
表 情:
内 容:
评论内容:不能超过 1000 字,需审核,请自觉遵守互联网相关政策法规。
验证码: 验证码 
深山工作室网友评论声明,请自觉遵守互联网相关政策法规。

您发布的评论即表示同意遵守以下条款:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家、社会、集体和公民的合法权益;
二、不得发布国家法律、法规明令禁止的内容;互相尊重,对自己在本站的言论和行为负责;
三、本站对您所发布内容拥有处置权。

更多信息>>栏目类别选择
rss学习
个人空间
网站设计
网站公告
下载
photoshop学习
ASP学习
DIV+CSS学习
SEO搜索引擎忧化
java学习
HTML学习
网站信息
网站类信息
更多>>同类信息
利用css中的scale()实现放大缩小效果
利用background-color:#000000a8在背景颜色16进制代码之后加字母加上数字让背景色透明
css背景使用base64编码或者将base64编码放在img图片标签中
利用css3中的-webkit-font-smoothing把网页文字的毛边去掉
解决手机端微信浏览器中视频自动播放和默认全屏问题
利用CSS实现半透明效果兼容IE与火狐与chrome等浏览器
在table中tr的display:block在firefox下显示布局错乱问题
在未知图片的宽度与高度时利用div+css将图片居中
更多>>最新添加文章
asp无限级调用分类显示
Object.assign的一些用法
利用css中的scale()实现放大缩小效果
uni-app操作json数组
uni-app自定义loading组件
uni-app一个像商城分类中心一样的联动侧边栏导航分类
uni-app实现tab选项卡
uni-app的父与子页面传递参数之属性Props字段类型讲解
更多>>随机抽取信息
工作室网站改版计划
一个非常不错的程序编辑工具--PSPad editor
IE6不支持png24的解决办法(png24做为css的背景)
CSS教程:弄懂闭合浮动元素
Javascript JS 限制复选框的选择个数
利用position属性把层永远定位于页面中部
改善用户体验之checkbox表单(最多可以选择三个)
对打开的窗口进行个性尺寸大小定制