html中word-wrap无效,你未必知道的CSS小知识：word-wrap和overflow-wrap是等效的

word-wrap并不是一个很常用的CSS属性，但在特定的环境中确实非常有用的。我们经常使用的一个例子是让页面中显示一个长url时换行，而不是撑破页面，下面是一个例子。

HTML代码

supercalifragilisticexpialidocious

TOGGLE word-wrap

CSS代码

body {

font-family: Arial, sans-serif;

text-align: center;

}

.p {

font-size: 24px;

text-align: center;

width: 200px;

margin: 20px auto;

border: solid 1px black;

min-height: 60px;

word-wrap: break-word;

}

button {

display: block;

margin: 0 auto;

}

JS代码

var p = document.getElementById('p'),

b = document.getElementById('b');

b.onclick = function () {

if (this.getAttribute('data-ww') === 'break-word') {

p.style.wordWrap = 'normal';

this.setAttribute('data-ww', 'normal');

} else {

p.style.wordWrap = 'break-word';

this.setAttribute('data-ww', 'break-word');

}

};

演示

因为这个属性最初是由微软发明的，所以，所有的浏览器都支持这个属性。

尽管有所有的浏览器都支持，但W3C决定要用overflow-wrap替换word-wrap，我想可能是他们认为word-wrap用词不当。overflow-wrap跟word-wrap具有相同的属性值，但现在，word-wrap被当作overflow-wrap的备选写法。

虽然已经有不少的浏览器支持overflow-wrap这种写法，但看起来没必要使用overflow-wrap来让老的浏览器不支持。所有的浏览器都会继续支持word-wrap这种写法。