Word wrap a link so it doesn't overflow its pa

2019-01-10 10:55发布

站内问答 / HTML/CSS
800 8 6

This question already has an answer here:

I have this piece of HTML

<div id='permalink_section'>
  <a href="here goes a very long link">here goes a very very long link</a>
</div>

with, for now, this CSS

div#permalink_section { width: 960px }

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?

8条回答
不美不萌又怎样
2楼-- · 2019-01-10 11:27

The following is a cross browser compatible solution.

#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+ */
}

Check working example at http://jsfiddle.net/5zsqP/1

查看更多
0人赞 添加讨论(0) 举报
【Aperson】
3楼-- · 2019-01-10 11:29

wrap link inside another div with smaller width

<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>
查看更多
0人赞 添加讨论(0) 举报
叛逆
4楼-- · 2019-01-10 11:36

if you're okay with css3, there's a property for that:

word-wrap:break-word
查看更多
0人赞 添加讨论(0) 举报
淡お忘
5楼-- · 2019-01-10 11:39

overflow:hidden seems to be the key to making an element of size:auto break-word correctly

<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/

That example includes a left float as I was trying to achieve a media-object like layout.

Unfortunately if you try to use table-cell elements it breaks again :(

查看更多
0人赞 添加讨论(0) 举报
放荡不羁爱自由
6楼-- · 2019-01-10 11:41 
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 "..."

Working example of the JS method: http://jsfiddle.net/fhCYX/3/

查看更多
0人赞 添加讨论(0) 举报
放我归山
7楼-- · 2019-01-10 11:43

You could also wrap each letter of the link in <span></span> using javascript for example.

<a href="http://foo.bar"><span>f</span><span>o</span><span>o</span></a>

But I would go for the css3 approach.

2017 Disclaimer: This is not a good solution and I never said it was. If you still feel the need to comment, please at least read the previous comments

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)