将链接换行，使其不超出父级 div 的宽度限制。

Question

将链接换行，使其不超出父级 div 的宽度限制。

67

我有这段代码：

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>

链接文字可能会非常长，当其长度超过div宽度时会溢出。有没有办法让链接在宽度超过div宽度时强制换行到下一行？

- Florent2

7个回答

24

如果你可以接受使用CSS3，那么有一个对应的属性：

word-wrap:break-word;

- corroded

12

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

- laffuste

0

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

或者

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

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

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

- TimFoolery

谢谢，word-wrap:break-word 很好用，我不能使用你提出的其他解决方案，因为我需要显示整个链接。 - Florent2

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>

- user554180

无法工作，例如http://example.com/index?param=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa溢出。 - Florent2

是的，加上overflow:hidden;可能有所帮助，但外观不够好。 - user554180

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元素，它会再次出现问题 :(

- The Trav

0

我在接受的答案中没有太多的运气，所以我尝试了不同的方法。在加载时，我用空格填充锚文本中的所有斜杠：“/”->“ /”。大多数链接没有斜杠，因此这样做没有任何作用，而大多数具有斜杠的链接都是超链接，这些链接使用此替换看起来很好，然后链接正确地换行。

    $('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);
    });

- Joshua Frank

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hussein · Accepted Answer

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

#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+ */
}

从如何在 <td> 中包含无空格的文本？开始

在这里检查工作示例。