强制换行应用word-wrap取代word-break

标签:CSS

今天在写网页时又遇到换行的问题了,之前是用JavaScript解决的,不过我觉得太麻烦,想用纯CSS来做,于是就去Google了一下,很快就发现了word-break。

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条评论 你不来一发么↓

    想说点什么呢?