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

Question

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:

<div id="main_frame" >
<iframe id="main_frame" src="homedept.php" name="iframe_a"></iframe>
</div>

The CSS is:

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;

}

Thanks for the reply @tyriar, I have set the word-wrap property to the original page now. Still nothing happens.

<div id="display_posts">


<?php //php echoes some text here ?>

</div>

The CSS code is:

#display_posts
{
word-wrap:break-word;
}

Answer 1

You can't apply word-wrap to an iframe, it's a completely separate page and styles from your original page won't apply. You would need to change the styles on the page where the iframe points.

Also id attributes must be unique, you have set id="main_frame" on both an iframe and a div.

Update

If word-wrap:break-all is on the iframe then maybe the width of the page is introducing the scroll bar. Make sure that your elements scale down correctly with the page. If you load up the page in your iframe in your browser you should be able to reduce the window size without a horizontal scroll bar appearing. If one does then it's an issue with the minimum width of that page.

Answer 2

You defined same ID 2 times , but ID must be unique , you can not declare it twice.

So use class instead of using ID

Also iframe call other page and you defined word-wrap in original page so its not apply.

Answer 3

Try

word-break:break-word

or

word-break:break-all

And try using class instead of ID because ID should be unique.