网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 手机学院 | 邮件系统 | 网络安全 | 认证考试
Firefox | IE | Maxthon | 迅雷 | 电驴 | BitComet | FlashGet | QQ | QQ空间 | Vista | 输入法 | Ghost | Word | Excel | wps | Powerpoint
asp | .net | php | jsp | Sql | c# | Ajax | xml | Dreamweaver | FrontPages | Javascript | css | photoshop | fireworks | Flash | Cad | Discuz!
当前位置 > 网站建设学院 > 网页制作 > CSS教程
网页制作:Dreamweaver教程,FrontPages教程,Javascript教程,HTML教程,CSS教程,心得技巧,DHTML教程,网页特效,Discuz!论坛
本月文章推荐
.CSS 循序渐进(三)样式“表”秀 .
.控制网页文件大小通过精简CSS实现.
.与表格边框有关的CSS语法.
.技巧总结:div中class与id的区别.
.CSS在IE和Nascape的显示差别.
.CSS三行三列DIV高度自适应的设置.
.跟初学者分享:学习css需要什么软.
.CSS条状图表形式的实现方法.
.CSS Hack兼容大全,令您的网页能正.
.跨浏览器的 inline-block 实现[C.
.DIV+CSS常见错误汇总.
.网页制作必知:初探CSS3的RGBA颜.
.巧用CSS制作特效艺术字(7例).
.CSS样式文件优化 更整洁而清晰.
.两句CSS完美截断侧栏最新评论列表.
.设计需知:CSS布局的意义与副作用.
.用css样式控制超链接颜色显示.
.CSS模块化设计—从空格谈起.
.纯CSS表单显示效果.
.英文强制换行 没有横向滚动条css.

css实现强制不换行/自动换行/强制换行

发表日期:2008-12-3

强制不换行
div{
white-space:nowrap;
}

自动换行

div{
word-wrap: break-word;
word-break: normal;
}

强制英文单词断行

div{
word-break:break-all;
}

 

CSS设置不转行:


overflow:hidden 隐藏
white-space:normal 默认
pre 换行和其他空白字符都将受到保护
nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象


设置强行换行:
word-break:
normal ; 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法

 

英文不换行

CSS里加上 word-break: break-all; 问题解决。这个问题只有IE才有,在FF下测试,FF可以自己加滚动条,这样也不影响效果

建议大家做Skin时,记得在body里加 word-break: break-all; 这样可以解决IE的框架被英文撑开的问题

以下引用word-break的说明, 注意word-break 是IE5+专有属性

语法:

word-break : normal | break-all | keep-all

参数:

normal :  依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本

说明:

设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文,应该使用break-all 。
对应的脚本特性为wordBreak。请参阅我编写的其他书目。

示例:

div {word-break : break-all; }

上一篇:CSS外框阴影效果 人气:673
下一篇:Div+CSS+JS树型菜单,可刷新 人气:836
浏览全部css的内容 Dreamweaver插件下载 网页广告代码 2009年新年快乐