Triggering word-wrap: break-word in CSS

I have a 开发者_如何学运维<div> that contains a <p> in which I want to, when the p is larger than the users' screen (eg a user intentionally posts a long string of characters to break the page layout), cause word-wrap.

The current method I have in place works okay; setting the <div>'s css to width: 97%, and the <p> to word-wrap: break-word; but this produces unwanted results if an image is put into the div that exceeds the width (high-resolution images-expanded in place), the image extends outside of the post. I of course don't want to set overflow: hidden/scroll on the <div>, because that would obscure the image.

Is there any way to trigger word-wrap: break-word in a way that will solve both of these problems? Or perhaps another CSS-based solution?

Depending on what control you have over the user-generated content, you may be able to apply a style to their images (e.g., to all img tags that are a child of the container holding your user's content).

Assuming you can add your own styling to their images, you might be able to do something using max-width.

Wrapping should be default behavior, but try setting your DIV's white-space to normal

white-space:normal;

http://www.w3schools.com/css/pr_text_white-space.asp