我有这段代码:
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宽度时强制换行到下一行?
#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> 中包含无空格的文本? 开始
在 这里 检查工作示例。
如果你可以接受使用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.comdiv#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
很好用,我不能使用你提出的其他解决方案,因为我需要显示整个链接。 - Florent2将链接包裹在另一个宽度较小的 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=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
溢出。 - Florent2overflow: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
元素,它会再次出现问题 :(
$('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);
});
word-wrap:break-word
的浏览器中正常工作,因为我想要确保white-space
属性正确地限制了不含空格的链接的宽度。为此,我将尝试使用旧版本的浏览器,但目前我无法访问它们。 - Florent2