Html Word wrap 一个链接，这样它就不会溢出其父 div 宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5241369/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Word wrap a link so it doesn't overflow its parent div width
提问by Florent2
I have this piece of code:
我有这段代码：
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>The link text can be very long and it overflows the div when it's length does exceed the div width. Is there a way to force the link to break and go on the next line when its width exceeds the div width?
链接文本可能很长，当它的长度超过 div 宽度时它会溢出 div。当链接的宽度超过 div 宽度时，有没有办法强制链接断开并转到下一行？
回答by Hussein
The following is a cross browser compatible solution:
以下是跨浏览器兼容的解决方案：
#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+ */ }
#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+ */ }
From How do I wrap text with no whitespace inside a <td>?
Check working example here.
在此处检查工作示例。
回答by corroded
If you're okay with CSS3, there's a property for that:
如果你对 CSS3 没问题，那么有一个属性：
word-wrap:break-word;
回答by laffuste
Works for Internet Explorer 8+, Firefox 6+, iOS 4.2, Safari 5.1+ and Chrome 13+.
适用于 Internet Explorer 8+、Firefox 6+、iOS 4.2、Safari 5.1+ 和 Chrome 13+。
CSS
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;
}
Source: kenneth.io
资料来源：kenneth.io
SCSS
社会保障局
@mixin word-wrap() {
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
Source: css-tricks.com
回答by Joshua Frank
I didn't have much luck with the solution in the accepted answer, so I tried a different approach. On load, I pad all slashes in the anchor text with spaces: "/" --> " / ". Most links don't have slashes and so this does nothing, and most links that do have them are hyperlinks, and these look okay with this substitution, and then the links do wrap correctly.
我对接受的答案中的解决方案不太走运，所以我尝试了一种不同的方法。在加载时，我用空格填充锚文本中的所有斜杠：“/”-->“/”。大多数链接没有斜杠，所以这什么都不做，而且大多数有斜杠的链接都是超链接，这些替换看起来没问题，然后链接正确换行。
$('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);
});
回答by The Trav
overflow:hiddenseems to be the key to making an element of size:autobreak-wordcorrectly
overflow:hidden似乎是size:autobreak-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;
}
?
?
That example includes a left float as I was trying to achieve a media-object like layout.
该示例包括一个左浮动，因为我试图实现类似布局的媒体对象。
Unfortunately if you try to use table-cellelements it breaks again :(
不幸的是，如果您尝试使用table-cell元素，它会再次中断:(
回答by TimFoolery
div#permalink_section
{
width:960px;
overflow:hidden;
}
or
或者
div#permalink_section
{
width:960px;
word-wrap:break-word
}
or use javascript to truncate the length of the link's text, replacing the end with "..."
或使用 javascript 截断链接文本的长度，将结尾替换为“...”
Working example of the JS method: http://jsfiddle.net/fhCYX/3/
JS 方法的工作示例：http: //jsfiddle.net/fhCYX/3/
回答by TimFoolery
wrap link inside another div with smaller width
将链接包装在另一个宽度较小的 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>
