Word包装一个链接，所以它不会溢出其父div宽度。 [英] Word wrap a link so it doesn't overflow its parent div width.

问题描述

我有这条HTML

 < div id ='permalink_section'> 
< a href =这里是一个很长的链接>这里是非常非常长的链接< / a> 
< / div> 
  

现在，此CSS

<$> p $ p> div＃permalink_section {width：960px}


可以非常长，当它的长度超过div宽度时溢出div。是否有一种方法强制链接断开，当它的宽度超过div宽度时继续下一行？

解决方案

以下是与跨浏览器兼容的解决方案。

  #permalink_section 
 {
白色空格： ; / * css-3 * / 
 white-space：-moz-pre-wrap; / * Mozilla，since 1999 * / 
空格：-pre-wrap; / * Opera 4-6 * / 
白色空格：-o-pre-wrap; / * Opera 7 * / 
 word-wrap：break-word; / * Internet Explorer 5.5+ * / 
} 
  

检查http://jsfiddle.net/5zsqP/1

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?

解决方案

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

这篇关于Word包装一个链接，所以它不会溢出其父div宽度。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！