Long words don't float, are they denser than short words?

Question

I want some text to be displayed within a box.

So, I wrap my text with an <article> tag

<article>
    <p>Here is my text ready to be boxed.</p>
</article>

and style it as a fixed width block, make long words to break, and hide the text when overflow:

article {
   display: inline-block;
   width:160px;
   overflow: hidden;
   word-wrap: break-word;
}

so far, so good. Text wraps correctly and long words break and wrap.

Problem happens when I put a floating image in front of the text.

<article>
    <img src="img.png"></img>
    <p>Here is my text, now preceded by an image.</p>
</article>

conveniently styled to float before the text.

img {
   width: 32px;
   float: left;
}

When text has only short words, it floats and wraps correctly. But long words don't float anymore, they sink to the bottom of the image.

See this fiddle http://jsfiddle.net/s0pvgoqu/23/

Are long words denser than short?

---

EDIT I am editing my question to include some complementary information to the answer I have accepted.

It seems that the only way to solve this problem is to break the long words with <wbr> trags.

Here is my code to insert <wbr> tags in long words

/* insert word break hint tags in long words at num pos */
String.prototype.wbr = function(num) {  
  return this.replace(
    RegExp("(\\w{" + num + "})(\\w)", "g"), 
    function(match,submatch1,submatch2){return submatch1 + "<wbr>" +submatch2}
  );
}

Answer 1

The only solution I came in to my mind is to use <wbr> to hint word-breaks.

This of course not a CSS solution thus might not be suitable in every situation, but it works well with floated content as well.

Answer 2

Add word-break: break-all;

article {
    display: inline-block;
    padding:12px;
    margin:2px;
    width:160px;
    height:160px;
    background-color:#eee;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
}