CSS换行样式by SoSo0_0 | 2010-01-22 | 15 Comments

今晚在制作主题时,无意中发现个问题:用长串的英文时,尽然不会自动换行且不会撑破页面,而中文确不会发生这类状况。本以为是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;
}

15 Responses to “CSS换行样式”

  1. /2010-01-2322 Reply|1楼

    不错哦~~学习了

  2. /2010-01-2422 Reply|2楼

    这个BUG都被你发现了,厉害。

  3. SoSo0_0对竹说/2010-01-2422 Reply|3楼

    @竹, 其实也不是什么bug,是我太out了!

  4. 笨笨/2010-01-2522 Reply|4楼

    学习了嘿嘿。。

  5. 笨笨/2010-01-2822 Reply|5楼

    技术性的东东学习一下。。

  6. 笨笨/2010-01-3122 Reply|6楼

    晕菜,每次来信息都要重新填写。。

  7. 淘气淘宝客/2010-02-0122 Reply|7楼

    我怎么记得看过此文?

    个性签名:别点我的名字,它只是个传说。www.thatwrong.com到此一游。

  8. 海派/2010-02-0322 Reply|8楼

    学习了。。
    .-= 海派´s last blog ..冒险喜剧科幻大片《失落的大陆》(视频) =-.

  9. Firm/2010-02-0522 Reply|9楼

    很多都是这个浏览器支持,那个浏览器不支持的~
    很麻烦哪~ 这东西~

  10. 寄之秋/2010-02-0622 Reply|10楼

    技术性的东西呢,不错呐,领教了

  11. 超人/2010-02-0722 Reply|11楼

    不错。学习学习~
    .-= 超人´s last blog ..小年!你们的小年是哪一天? =-.

  12. 风中的峰/2010-02-1022 Reply|12楼

    很不错,学习一下!

  13. kay/2010-02-1022 Reply|13楼

    http://www.crazyfrom.com/ 你這個网站的留言框怎么移植的!?我也想移植,但是我没成功!希望能提供一下帮助!我最近也在做cms主题!谢谢!QQ:303602897 kay@llpop.com

  14. /2010-02-1622 Reply|14楼

    看了一下,我心也没怎么更新哦。哈哈。
    .-= 虾´s last blog ..虎年前几小时回顾。。 =-.

  15. SoSo0_0对虾说/2010-02-1622 Reply|15楼

    @虾,
    哎哟,那就很失败了!

Leave a Reply