为啥链接的文本会溢出 div 框？

Posted

技术标签:

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

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

See print screen 1 here

See simple example here

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

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

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

【问题讨论】：

【参考方案1】：

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

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

【讨论】：

【参考方案2】：

试试这个代码： DEMO

<html>
  <head>
    <style type="text/css">
      #main width:100px;
      #main pword-wrap: break-word;
      #main aword-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

以上是关于为啥链接的文本会溢出 div 框？的主要内容，如果未能解决你的问题，请参考以下文章

CSS：div的文本内容溢出到填充中是不是正确？

如何使 textarea 填充 div 块？

为啥要使用 resize css 属性调整任何 div 都需要溢出！= 可见？

为啥点击 UICollectionViewCell 上的文本会消失？

为啥当 Interstitial 关闭时先前输入的文本会从 TextView 中消失

Django：为啥我放置在 Django Summernote 中的文本会在我的 HTML 模板中显示 HTML 标记？