Question

我有这段代码：

＆＃13;

div#permalink_section {
  width: 960px
}

＆＃13;

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

＆＃13;

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

Answer 1

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

#permalink_section
{
    white-space: pre-wrap; /* css-3 */    
    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+ */
}

检查工作示例here。

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

<强> SCSS

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

来源：css-tricks.com

Answer 4

div#permalink_section
{   
    width:960px;
    overflow:hidden;
}

或

div#permalink_section
{   
    width:960px;
    word-wrap:break-word
}

或使用javascript截断链接文本的长度，将结尾替换为“...”

JS方法的工作示例：http://jsfiddle.net/fhCYX/3/

Answer 5

将链接包含在另一个宽度较小的div中

<html>
<head><title></title>

<style type="text/css">
div#permalink_section { width: 960px }

</style>
</head>
<body>
<div id='permalink_section'>
<div id="linkwrap" style="width:100px">
  <a href="here goes a very long link">here goes a very very long link</a>
  </div>
</div>
</body>
</html>

Answer 6

我在接受的答案中没有太多运气，所以我尝试了另一种方法。在加载时，我用空格填充锚文本中的所有斜杠：“/” - ＆gt; “/”。大多数链接没有斜杠，因此这没有任何作用，大多数具有它们的链接都是超链接，这些替换看起来没问题，然后链接确实正确包装。

    $('a').each(function ()
    {
        //get the content
        var content = $(this).html();

        //a regex to find all slashes
        var rgx = new RegExp('/', 'g');

        //do the replacement
        content = content.replace(rgx, " / ")

        //the previous step also affects http:// (where present), so fix this back up
        content = content.replace('http: /  / ', 'http://');

        //set the content back into the element
        $(this).html(content);
    });

Answer 7

overflow:hidden似乎是正确制作size:auto break-word元素的关键

<ul class="list">
<li class="item">
    <div class="header">
      <div class="content"></div>
    </div>
    <div class="body ">
<p>Loremipsumdolorsitametconsecteturadipisicingelitseddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.</p>
    </div>
</li>

</ul>


.list {
    border: 1px solid black;
    margin: 50px;
}

.header {
    float:left;
}

.body {
    overflow: hidden;
}

.body p {
    word-wrap: break-word;
}

.header .content {
    background: #DDD;
    width: 80px;
    height: 30px;
}

http://jsfiddle.net/9jDxR/

该示例包括左浮动，因为我试图实现类似布局的媒体对象。

不幸的是，如果您尝试使用table-cell元素，它会再次中断:(

Answer 8

您也可以使用javascript将<span></span>中的链接的每个字母包装起来。

<a href="http://foo.bar"><span>f</span><span>o</span><span>o</span></a>

但我会采用css3方法。

2017免责声明：这不是一个好的解决方案，我从来没有说过。如果您仍然觉得需要发表评论，请至少阅读之前的评论

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

8 个答案: