왜 링크 된 텍스트가 div 상자를 오버플로합니까?

크롬 및 사파리에서 링크는 너비를 수신하지 않습니다. 500px; CSS에서. 텍스트는 있지만 링크는 아닙니다.왜 링크 된 텍스트가 div 상자를 오버플로합니까?

어떤 아이디어?
많은 도움을 주셨습니다.
감사
엠마

나도 정말 간단한 테스트를 시도했습니다.

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

출처

2012-11-29 user1863410

-1

이 코드를보십시오 : 코드를 참조 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>

출처

2012-11-29 14:21:01

단락에 추가하면 어떻게 도움이됩니까? 이 코드를 테스트 해 보셨습니까? http://jsfiddle.net/BUyLj/ –

수정 사항에 대한 답변이 업데이트되어 작동합니다. http://jsfiddle.net/m8nRy/ @StephanMuller –

파일 이름에).

div에서 스타일 word-wrap: break-word을 사용하면되지만 모든 브라우저에서 작동하지는 않습니다.

출처

2012-11-29 14:21:09

왜 링크 된 텍스트가 div 상자를 오버플로합니까?

답변

관련 문제