触发自动换行：CSS中的断行

Question

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?

Answer 1

Depending on what control you have over the user-generated content, you may be able to apply a style to their images (eg, 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.

Answer 2

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