CSS设计之如何让数字字母自动换行
发布时间:2007-10-19 15:12:00
标签:自动换行,换行,css
大家都知道连续的英文或数字能是容器被撑大,不能根据容器的大小自动换行,网页设计初学者可能不知道怎么处理,下面是CSS如何将他们换行的方法!
对于div
1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准。
#wrap{white-space:normal; width:200px; }
或者
#wrap{word-break:break-all;width:200px;}
<div >ddd1111111111111111111111111111111111</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 >ddd1111111111111111111111111111111111111111</div>
效果:容器正常,内容隐藏
对于table
1. (IE浏览器)使用样式table-layout:fixed;
<style>
.tb{table-layout:fixed}
</style>
<table width="80">
<tr>
<td>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
效果:可以换行
2.(IE浏览器)使用样式table-layout:fixed与nowrap
<style>
.tb {table-layout:fixed}
</style>
<table width="80">
<tr>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
效果:可以换行
3. (IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap
<style>
.tb{table-layout:fixed}
</style>
<table 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 width=80>
<tr>
<td width=25% nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
<td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
</tr>
</table>
这里单元格宽度一定要用百分比定义
效果:正常显示,但不能换行(注:在FF下还没有能使容器内容换行的好方法,只能用overflow将多出的内容隐藏,以免影响整体效果)
0
投稿
猜你喜欢
- CSS styles和HTML styles有什么区别?HTM style是指自定义HTML标识中一些标签,例如说在HTML中〈B〉〈/B〉
- 在程序的开发过程中,处理分页是大家接触比较频繁的事件,因为现在软件基本上都是与数据库进行挂钩的。但效率又是我们所追求的,如果是像原来那样把所
- 在制作网页的过程中,自适应问题是经常遇到,而又最让人头疼的,看了好多种解决的方法,但是都不是万能的。今天遇到这个问题,实在让我挠头,借鉴了
- 安装完 Oracle11g 之后,想打开自带的 SQL Plus 来学习,然后按照提示用 sys 用户来连接数据库,可输了好几次都提示一个错
- 4款JavaScript放大镜特效脚本。准确的说,Anythingzoomer和Bezoom才是正宗的放大镜特效,当鼠标悬浮在图片上时,能放
- 很多朋友对FrontPage2003中增加的网页布局功能很感兴趣,现在我们一起来深入了解这一实用功能。 用FrontPage200
- 为了方便使用分类,我定义了一个分类表category,里面字段是id(自动编号) cat_name(分类名) pare
- <!-- #include file="../conn.asp" --&
- 一). ubuntu下mysql安装布局:/usr/bin  
- Oracle 数据库启动Oracle shutdown的时候突然断电,导致使用sql/plus启动时无法连接到数据库,具体描述为: conn
- GetRepeatTimes(TheChar,TheString) 得到一个字符串在另一个字符串当中出现几次的函数(新)如:response
- 错误类型: Microsoft JET Database Engine (0x80040E10) 至少一个参数没有被指定值。 原因:在写SQ
- 相信大家都知道html和css,知道html结构和css表现分离,知道html语义化,这些都是这几年的热门关键字。语义化的html在国内也是
- monfs :我想知道javascript是否可以实现这样的功能来改变本地的IP地址,例如我本地设置的IP地址是192.168.0.1,我想
- 【代码示例】 [code=SQL] DELIMITER $$ DROP FU
- 一、将PHP数组转换为JSON格式在PHP中,我们可以直接使用数组来存储数据。但是在JS中,数组通常以JSON(JavaScript Obj
- 靓丽的网页是怎样生成的?也许您会脱口而出,当然是自己设计出来的。没错!不过这其中也有网页制作工具的一部分功劳,因为功能强大的网页制作工具可以
- 阅读上一篇:WEB前端开发经验总结 ⅠWEB标准篇现在我们接着来讲怎么在实际开发中结合我前面所讲的理论来开发制作页面吧。现在就来看看我们要制
- --建递增序列CREATE SEQUENCE LZEAM_SP_LOOP_EQ_SEQ MINVALUE 1 INCREMENT BY 1
- 一、两层结构的ASP应用有何缺点 在Browser/Server 应用程序开发领域,微软公司的IIS/ASP以其强大的功能,良好的扩展能力,