使一长行文本实际上在基于％的div上中断

Question

I am trying to get it so that if a long string of characters are entered in the forums on my new site, it doesn't break the % based div/table for the content.

This is what I mean

What am I doing wrong? How do I make it so that it strictly breaks the long character, to fit the area no matter what. I even tried using php code, however it didn't much work as I wanted it to:

 <?php echo wordwrap($Body),150,"\n",true); ?>

Any ideas, I made that codepen link myself with an example of what happens, and how I want it to look.

Answer 1

You can add some CSS:

.innerdiv{
  width: 100%; 
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;

}

Adding the word-break: and hyphens: properties will force the long word to break rather than extending it's container.

jsFiddle demo.