为什么链接的文本会溢出 div 框？答案

【问题标题】：Why is linked text is overflowing the div box?为什么链接的文本会溢出 div 框？
【发布时间】：2012-11-17 15:26:34
【问题描述】：

在chrome和safari中，链接不听宽度：500px；在 CSS 中。文字有，但链接没有。

有什么想法吗？
非常感谢您的帮助。
谢谢
艾玛

我也尝试了一个非常简单的测试。见代码：

<html>
<head>
<style type="text/css">
#main {width:100px;}
</style>
</head>

<body>
<div id="main">Content for  id "main" Goes Here Content for  id "main" Goes Here Content for  id "main" Goes Here Content for  id "main" Goes Here <a href="http://www.thesun.co.uk/sol/homepage/showbiz/4672063/kristen-stewart-flashes-bra-award-bash-jim-jams.html">http://www.thesun.co.uk/sol/homepage/showbiz/4672063/kristen-stewart-flashes-bra-award-bash-jim-jams.html</a></div>
</body>
</html>

【问题讨论】：

标签： css html href

【解决方案1】：

这是因为链接通常被视为一个单词（除非其中有连字符，这就是为什么您的链接最终会在文件名处中断）。

您可以做的一件事是在 div 上使用样式 word-wrap: break-word，但这并不适用于所有浏览器。

【讨论】：

【解决方案2】：

试试这个代码： DEMO

<html>
  <head>
    <style type="text/css">
      #main {width:100px;}
      #main p{word-wrap: break-word;}
      #main a{word-wrap: break-word;}
    </style>
   </head>

   <body>
     <div id="main"><p>Content for  id "main" Goes Here Content for  id "main" Goes Here Content for  id "main" Goes Here Content for  id "main" Goes Here <a href="http://www.thesun.co.uk/sol/homepage/showbiz/4672063/kristen-stewart-flashes-bra-award-bash-jim-jams.html">http://www.thesun.co.uk/sol/homepage/showbiz/4672063/kristen-stewart-flashes-bra-award-bash-jim-jams.html</a></p>
      </div>
   </body>
</html>

【讨论】：

在段落中添加它有什么帮助？你甚至测试过这段代码吗？ jsfiddle.net/BUyLj
用更正更新答案，它可以工作jsfiddle.net/m8nRy@StephanMuller