今晚在制作主题时,无意中发现个问题:用长串的英文时,尽然不会自动换行且不会撑破页面,而中文确不会发生这类状况。本以为是wordpress存在的bug!后来发现原来CSS中的word-wrap或word-break样式(很少很少用到)是可以避免此类问题发生的,但是两者有区别和与浏览器兼容的问题!
总结下:
用word-wrap控制换行,如:word-wrap:break-word
使用break-word时,是将强制换行。中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。break-word是控制是否断词的。normal是默认情况,英文单词不被拆开。
使用break-all,是断开单词。在单词到边界时,下个字母自动到下一行。主要解决了长串英文的问题。keep-all,是指Chinese, Japanese, and Korean不断词。即只用此时,不用word-wrap,中文就不会换行了。(英文语句正常。)
IE下:
使用word-wrap:break-word;所有的都正常。
FireFox下:
如这2个都不用的话,中文不会出任何问题。英文语句也不会出问题。但是,长串英文会出问题。
为了解决长串英文,一般用word-wrap:break-word;word-break:break-all;。但是,此方式会导致,普通的英文语句中的单词会被断开(IE下也是)。
目前主要的问题存在于 长串英文 和 英文单词被断开。其实长串英文就是一个比较长的单词而已。即英文单词应不应该被断开?那问题就很明显,显然不应该被断开了。对于长串英文,就是恶意的东西,自然不用去管了。但是,也要想些办法,因为它可能会把容器撑大。
那么就用:overflow:auto; IE下,长串会自动折行。FireFox下,长串会被遮盖。
所以,综上,最好的方式是word-wrap:break-word;overflow:hidden; 让文章换行!
也可以用(测试没问题):
#single
{
table-layout: fixed;
word-wrap:break-word;
word-break:break-all;
}
/2010-01-2322不错哦~~学习了
/2010-01-2422这个BUG都被你发现了,厉害。
/2010-01-2422@竹, 其实也不是什么bug,是我太out了!
/2010-01-2522学习了嘿嘿。。
/2010-01-2822技术性的东东学习一下。。
/2010-01-3122晕菜,每次来信息都要重新填写。。
/2010-02-0122我怎么记得看过此文?
个性签名:别点我的名字,它只是个传说。www.thatwrong.com到此一游。
/2010-02-0322学习了。。
.-= 海派´s last blog ..冒险喜剧科幻大片《失落的大陆》(视频) =-.
/2010-02-0522很多都是这个浏览器支持,那个浏览器不支持的~
很麻烦哪~ 这东西~
/2010-02-0622技术性的东西呢,不错呐,领教了
/2010-02-0722不错。学习学习~
.-= 超人´s last blog ..小年!你们的小年是哪一天? =-.
/2010-02-1022很不错,学习一下!
/2010-02-1022http://www.crazyfrom.com/ 你這個网站的留言框怎么移植的!?我也想移植,但是我没成功!希望能提供一下帮助!我最近也在做cms主题!谢谢!QQ:303602897 kay@llpop.com
/2010-02-1622看了一下,我心也没怎么更新哦。哈哈。
.-= 虾´s last blog ..虎年前几小时回顾。。 =-.
/2010-02-1622@虾,
哎哟,那就很失败了!