【问题标题】: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>

【问题讨论】:

    标签: 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>​
      

      【讨论】:

      猜你喜欢
      • 2017-01-27
      • 1970-01-01
      • 1970-01-01
      • 2021-06-15
      • 1970-01-01
      • 2020-04-29
      • 1970-01-01
      • 1970-01-01
      • 2011-05-22
      相关资源
      最近更新 更多