自动换行链接，使其不会溢出其父 div 宽度 [重复]答案

【问题标题】：Word wrap a link so it doesn't overflow its parent div width [duplicate]自动换行链接，使其不会溢出其父 div 宽度 [重复]
【发布时间】：2011-07-11 14:43:10
【问题描述】：

我有这段代码：

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。当链接的宽度超过 div 宽度时，有没有办法强制链接中断并继续下一行？

【问题讨论】：

标签： html css width word-wrap

【解决方案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+ */
}

来自How do I wrap text with no whitespace inside a <td>?

检查工作示例here。

【讨论】：

我的链接中没有空格，white-space 属性是否有效？
是的，您需要它们来实现跨浏览器兼容性。我更新了我的答案，并在 jsfiddle 上包含了一个工作示例。
感谢侯赛因的帮助。我注意到在您的示例中有空格，这是一个没有空格的叉子jsfiddle.net/wxBxQ 不幸的是，我目前只能访问支持自动换行的浏览器，所以我必须检查不支持自动换行的浏览器
我想检查它是否适用于不支持word-wrap:break-word 的浏览器，因为我想确保white-space 属性正确地限制了不包含空格的链接的宽度。为此，我将尝试使用较旧的浏览器，但目前我无法访问它们。
另外值得注意的是，自动换行已从 CSS3 规范中撤出：impressivewebs.com/new-css3-text-wrap

【解决方案2】：

如果你对 CSS3 没问题，有一个属性：

word-wrap:break-word;

【讨论】：

【解决方案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

【讨论】：

【解决方案4】：

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

【讨论】：

不起作用，例如http://example.com/index?param=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaoverflows
是的，我想添加溢出：隐藏；可以帮助解决这个问题，但看起来不太好。

【解决方案5】：

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

或

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

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

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

【讨论】：

谢谢，word-wrap:break-word 工作正常，不能使用您提出的其他解决方案，因为我需要显示整个链接

【解决方案6】：

我对接受的答案中的解决方案不太满意，所以我尝试了一种不同的方法。加载时，我用空格填充锚文本中的所有斜线：“/”->“/”。大多数链接没有斜杠，所以这什么都不做，而且大多数有斜杠的链接都是超链接，这些看起来可以替换，然后链接正确换行。

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

【讨论】：

【解决方案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 元素，它会再次中断:(

【讨论】：