这个问题在这里已有答案：
我有这段代码：
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宽度时，有没有办法强制链接断开并继续下一行？
以下是跨浏览器兼容的解决方案：
#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。
如果你对css3没问题，那就有一个属性：
word-wrap:break-word
适用于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
将链接包含在另一个宽度较小的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>
div#permalink_section
{
width:960px;
overflow:hidden;
}
要么
div#permalink_section
{
width:960px;
word-wrap:break-word
}
或使用javascript截断链接文本的长度，用“...”替换结尾
JS方法的工作示例：http://jsfiddle.net/fhCYX/3/
我在接受的答案中对解决方案没有太多运气，所以我尝试了不同的方法。在加载时，我用空格填充锚文本中的所有斜杠：“/” - >“/”。大多数链接没有斜杠，因此这没有任何作用，并且大多数具有它们的链接都是超链接，这些替换看起来没问题，然后链接确实正确包装。
$('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);
});
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;
}
这个例子包括一个左浮动，因为我试图实现像布局这样的媒体对象。
不幸的是，如果你尝试使用table-cell元素，它再次打破:(
您也可以使用javascript包装<span></span>中链接的每个字母。
<a href="http://foo.bar"><span>f</span><span>o</span><span>o</span></a>
但我会选择css3方法。
2017免责声明：这不是一个好的解决方案，我从来没有说过。如果您仍然觉得有必要发表评论，请至少阅读之前的评论