强制换行应用word-wrap取代word-break
2009 11 19 04:12 PM 2837次查看
word-break是IE自创的一个属性,它的意思顾名思义就是断词。
它是指在容器边界处如何断词,共有3种值:normal是默认情况,英文单词不被拆开,单词之间被拆开,中文也被拆开;break-all则是一到边界,无论什么字母都断开,这样长串英文就不会溢出;keep-all是指中文不会被断开,除非加空格、标点之类的。
实际上break-all是很符合我要求的,不过截断单词有点不好,而更为重要的是:它在IE和Chrome上正常,而Firefox会忽略。
于是我继续找,发现了word-wrap,它是用于控制换行的。
它也有2种值:normal是默认情况,在边界处不换行,可能超过容器边界(Firefox)或撑大容器(IE);break-word则会在边界处让单词换行显示,而且如果有必要,会将长词断开。
印象中以前Firefox也是不支持这个属性的,但今天测试时发现Firefox 3.5.5已经正确支持了,而IE和Chrome自然也是支持的。
顺便提一下,如果要不换行的话(例如标题和列表),可以使用这种组合:
.nowrap {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
然而遗憾的是,text-overflow仍然只有IE和WebKit(Chrome和Safari)认识,而Opera可以处理-o-text-overflow,但Firefox还是不兼容,于是看不到省略号。解决办法可以参考《纯CSS在Firefox模拟text-overflow: ellipsis效果》。
0条评论 你不来一发么↓