The word-wrap property does not seem to work in CSS

[Acme]

I have designed an html iframe where I want to use the word-wrap property, i.e., it should break long words onto the next line. But what happens instead is that for long words, it adds a horizontal scroll-bar rather than breaking the word onto the next line.I tried hiding the scroll bar by using "overflow:hidden" property , but nothing happens.I could use some help here.Here's the html code for iframe:\[code\]<div id="main_frame" ><iframe id="main_frame" src="http://stackoverflow.com/questions/15632109/homedept.php" name="iframe_a"></iframe></div>\[/code\]The CSS is:\[code\]div#main_frame{ float: left;margin-top:198px;margin-left:5px;float:left;position:relative;width:100%;height:900px;z-index: 0;word-wrap:break-word;}iframe#main_frame{float:left;margin-left: 30px;margin-right: 300px;float:left;border:none;word-wrap:break-word;width: 78%;height:70%;z-index: 1;}\[/code\]Thanks for the reply @tyriar, I have set the word-wrap property to the original page now. Still nothing happens.\[code\]<div id="display_posts"><?php //php echoes some text here ?></div>\[/code\]The CSS code is:\[code\]#display_posts{word-wrap:break-word;}\[/code\]