Text in p tag is not breaking to new lines

Question

Please have a look at the following image:

And here is the code with the problem:

<div class="excerpt">
 <p>Manual para la descarga e instalación de los contenidos digitales del Proyecto Canaima&nbsp;Educativo,&nbsp;conformado&nbsp;por&nbsp;recursos&nbsp;de&nbsp;aprendizaje&nbsp;que&nbsp;buscan&nbsp;impulsar&nbsp;la&nbsp;interacción&nbsp;entre&nbsp;el[...]</p>
</div>

For some bizarre reason the text is getting on top of the columns to the right. I tried changing the height of all of the elements taking part to 1000px, and they are STILL overlapping!

EDIT: Question had a link originally so now that it was succesfully answered I changed it with an image per @Roddy of the Frozen Peas suggested.

As some people suggested, if you remove the & nbsp; the problem goes away. But that was not the case as it looks like the admin was inserting those & nbsp; and I have no saying in changing the admin. So the accepted answer finally solved it.

Answer 1

There is a lot of white space being generated withing your html. add this to your CSS

div.excerpt p {
    word-wrap: break-word;
}