CODEWITHSUNDEEP
csshtmlhref
user1863410
user1863410

Reputation: 33

Why is linked text is overflowing the div box?

In chrome and safari, the links do not listen to the width:500px; in the css. The text does, but not the link.

See print screen 1 here

See simple example here

Any ideas?
Help much appreciated.
Thanks
Emma

I've tried a really simple test too. See code:

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

Upvotes: 3

Views: 578

Answers (2)

Alessandro Minoccheri
Alessandro Minoccheri

Reputation: 35963

Try this code: 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>​

Upvotes: -1

Stephan Muller
Stephan Muller

Reputation: 27600

It's because a link is usually seen as one single word (except when there's a hyphen in it, which is why your links eventually break at the filename).

One thing you could do is use the style word-wrap: break-word on the div, but that doesn't work in all browsers.

Upvotes: 2

Related Questions