Word包装一个链接,因此它不会溢出其父div宽度.

Question

我有这个HTML

div#permalink_section {
  width: 960px
}

目前,这个CSS

<div id='permalink_section'>
  <a href="here goes a very long link">here goes a very very long link</a>
</div>

链接文本可能很长,当它的长度超过div宽度时它会溢出div.当宽度超过div宽度时,有没有办法强制链接断开并继续下一行？

Answer 1

以下是跨浏览器兼容的解决方案.

#permalink_section
{
    white-space: pre-wrap; /* CSS3 */    
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */    
    white-space: -o-pre-wrap; /* Opera 7 */    
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

查看http://jsfiddle.net/5zsqP/1上的工作示例

Answer 2

如果你对css3没问题,那就有一个属性:

word-wrap:break-word;

Answer 3

适用于 Internet Explorer 8+、Firefox 6+、iOS 4.2、Safari 5.1+ 和 Chrome 13+。

CSS

.word-wrap {
    /* Warning: Needed for oldIE support, but words are broken up letter-by-letter */
    -ms-word-break: break-all;
    word-break: break-all;
    /* Non standard for webkit */
    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

资料来源：kenneth.io

社会保障局

@mixin word-wrap() {
    word-break:     break-word;
    -webkit-hyphens: auto;
    -moz-hyphens:    auto;
    hyphens:         auto;
}

来源：css-tricks.com