Insert word breaks before a word extends beyond container - html

Insert word breaks before a word extends beyond container - html

I have a problem where a table overflows its container. There is one cell
that contains a pre with dynamic content, and this cell causes the table
to extend beyond its parent. I think that all I need is to force it to
wrap the lines so that the table doesn't overflow. I tried
pre.content {
white-space: pre-wrap;
}
To preserve white space as well as wrap the content, but this seems to
insert breaks only after a word has already extended beyond its bounds. I
want it to wrap a word before it leaves the container. I realize that I
could break mid-word with word-wrap: break-word; but this makes it very
hard to read.
I'm still trying to learn all the in and outs of css so I might have a
wrong diagnosis. The table does not have a set width because I am assuming
that the table should remain within its parent by default. I am starting
to think I am wrong. I tried to set the width to 100% but then that seems
to make all the cell widths equal which is not what I want. So I figure
getting the correct wrapping will fix the problem. Hopefully someone can
help! Thanks in advance!