自动换行问题,一般的文字换行是合理的,但连续的数字和英文字母往往很大程度上支撑着容器,真的很为难。 介绍CSS如何实现换行。
不强制换行
div{
white-space:nowrap;
}
自动换行
div{
word-wrap: break-word;
魔兽世界:正规;
}
强制英语单词换行
div{word-break:break-all; }
CSS设置不跳槽:
隐藏隐藏隐藏:隐藏
white-space:normal
默认的pre换行符和其他空格字符将受到保护
nowrap强制所有文本在同一行中显示,直到文本结束或遇到br对象
设置强制换行符:
魔兽世界:正规; 允许根据亚洲和非亚洲语言的文本规则在单词中换行符
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 :正常| break-all|keep-all
参数:
normal :允许根据亚洲和非亚洲语言的文本规则在单词中换行
break-all :此行为与亚洲语言normal相同。 也允许在非亚洲语言文本行中的任何单词内进行分隔符。 此值适用于包含非亚洲文本的亚洲文本
keep-all :与所有非亚洲语言的normal相同。 对于中文、韩语、日语,不允许断字。 适用于包含少量亚洲文本的非亚洲文本
说明:
设置或设置要搜索的文本的内联换行符的行为。 特别是出现多种语言时。 中文的情况下,应该使用break-all。 对应的脚本特性是wordBreak。 请参考CSS参考手册。
示例:
div {word-break : break-all; }