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

时间:2011-03-09 04:36:48

标签: html css width word-wrap

我有这段代码:



div#permalink_section {
  width: 960px
}

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

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

8 个答案:

答案 0 :(得分:102)

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

#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

答案 1 :(得分:9)

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

word-wrap:break-word

答案 2 :(得分:2)

适用于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

答案 3 :(得分:0)

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

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

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

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

答案 4 :(得分:0)

将链接包含在另一个宽度较小的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>

答案 5 :(得分:0)

我在接受的答案中没有太多运气,所以我尝试了另一种方法。在加载时,我用空格填充锚文本中的所有斜杠:“/” - &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);
    });

答案 6 :(得分:0)

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元素,它会再次中断:(

答案 7 :(得分:-2)

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

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

但我会采用css3方法。

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