自动换行链接，使其不会溢出其父 div 宽度 [重复]
Posted
技术标签:
【中文标题】自动换行链接，使其不会溢出其父 div 宽度 [重复]【英文标题】：Word wrap a link so it doesn't overflow its parent div width [duplicate] 【发布时间】：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 宽度时，有没有办法强制链接中断并继续下一行？
【问题讨论】：
【参考方案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 元素，它会再次中断:(
【讨论】：
以上是关于自动换行链接，使其不会溢出其父 div 宽度 [重复]的主要内容，如果未能解决你的问题，请参考以下文章