Question

I have a widget on a page that calls another script for source. Like this:

<!-- Beginning of widget code. -->
<div id="xyz_widget" ></div>
<script id="bootstrap" type="text/javascript" src="<some location>/bootstrap.js?" charset="utf-8">
</script>

In bootstrap.js exists this iframe code:

<iframe style='background:transparent;overflow:hidden;border:0px;height:100%;width:100%' 
frameborder='0' border='0' marginwidth='0' marginheight='0' "width='100%' height='100%' 
allowTransparency='true'
src='"+buildBaseUrl (pUri)+"/widget/widget.jsp?"+pUri.query+"'>
</iframe>

My issue is that I am unable to wrap long text inside the frame. So 111111111111111111111111111111111111111111111 busts out of the frame width. I tried word-wrap:break-word but it does not help.

I should also mention that the issue exists only in IE. FF, Chrome, Safari all work ok.

Any help?

Answer 1

Have a look at this css property -ms-word-wrap, In the page that the iframe loads put a div like this

<div style="word-wrap:break-word;width:100%;left:0">
    ... //content on the page
</div>

Hope that helps,