css 不换行 自动换行 强制换行的实现方法_经验交流

强制不换行

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

时间: 2022-12-25

css 不换行 自动换行 强制换行的实现方法_经验交流的相关文章

CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法_经验交流

关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) <style> #wrapper { width: 100px!important; /* IE7+FF */ width: 

css强制换行 css强制不换行的css方法_经验交流

以前总结过Div的换行和不换行的css写法.但对于表格单元格只知道一个属性nowrap可以使其不换行. 近日有此需要,但发现加上nowrap在某些情况下还是会换行!无奈,没有一个强制不换行的方法吗? baidu了一下,令俺非常欣慰,还真的找到了办法,问题解决了. 用CSS实现表格单元格数据自动换行或不换行 1.自动换行: 自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行

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

强制不换行 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-brea

firefox css自动换行的实现方法_经验交流

IE直接用:word-break:break-all;  /*允许词内换行*/    word-wrap:break-word; /*内容将在边界内换行*/    /*需要注意的默认是:*/    word-wrap:normal /*允许内容顶开指定的窗口边界*/           而firefox却没有很好的实现办法 ,一个折中方案就是使用滚动条,但网上也提出了一种用js来判断换行的办法,这里摘录下(转自网络,特此说明). JavaScript复制代码 <script type="t

提高CSS网页渲染效率的11点注意事项_经验交流

1.十六进制的颜色值对位数与大小写  编写十六进制颜色值时你可能会用小写字母或省略成3位数,关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响,但十六进制的颜色值默认标准是大写及6位数标注.在未知情况下不希望冒险而降低了渲染的效率.  * 不赞成 - color:#f3a;  * 建议用 - color:#FF33AA;  2.display与visibility的差异  他们用于设置或检索是否显示对象.display隐藏对象不保留物理空间,visibility为隐藏对象保留占据的物理空

CSS仿淘宝首页导航条布局效果_经验交流

以下是CSS内容部分: 以下是引用片段: 首页 数码通讯 女人 男人 家居 书籍音像 运动 游戏 宠物 香港街 淘宝商城 仿淘宝网首页导航条效果 转载请注明出处 子鼠 www.zishu.cn 2006-05-21 凌晨03:05分 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

CSS实现每行新闻数量不等效果代码_经验交流

本来还以为这块是由后台单独去做的,今天看到这种效果,居然是CSS实现的.现在将它放到这里与大家共享 特别推荐 1.脚本代码收藏站,AJAX/JS/ASP/PHP一网打尽[特别推荐]! 2.看书了小说网! 3.中文最强大的搜索引擎! 4.,下载中心! 5.新增加photoshop,flash,制作教程经典收藏! [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

在DW中CSS编码需要注意和掌握的一些技巧_经验交流

由于"可视化"和操作简便,在DW中编写CSS的朋友很多,今天我们介绍一些在DW中编写CSS的"最佳习惯",希望对大家有所帮助. CSS正在改变网站设计的进程.为迎合不断增长的倾向于CSS的设计人员的需求,Macromedia DW MX引进了一些新的及改善过的CSS相关的特性.有了这些新的特性,你可以为未来的更新作好计划,开发与W3C标准更加兼容的站点.本文讨论在DW MX中使用CSS以及突出某一特定CSS特性时的一些建议. 一般地讲,样式表(style sheet

一些很不错的css技巧,但也常为人们所忽略_经验交流

一.区分大小写 当在XHTML中使用CSS,CSS里定义的元素名称是区分大小写的.为了避免这种错误,我建议所有的定义名称都采用小写. 二.不需要给背景图片路径加引号 为了节省字节,我建议不要给背景图片路径加引号,因为引号不是必须的.例如: background:url("images/***.gif") #333;  可以写为 background:url(images/***.gif) #333;  如果你加了引号,反而会引起一些浏览器的错误. 三.用正确的顺序指定链接的样式 当你用