Lange Wörter schweben nicht, sind sie dichter als kurze Wörter?

Question

Ich möchte etwas Text in einer Box angezeigt werden.

So wickeln ich meinen Text mit einem <article> Tag

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

und Stil es als feste Breite Block, lange Wörter machen zu brechen, und den Text verbergen, wenn Überlauf:

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

So weit, ist es gut. Text wird korrekt umbrochen und lange Wörter werden unterbrochen und umbrochen.

Problem tritt auf, wenn ich ein schwebendes Bild vor den Text lege.

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

bequem gestylt, um vor dem Text zu schweben.

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

Wenn Text nur kurze Wörter enthält, schwebt er und wird korrekt umgebrochen. Aber lange Wörter schwimmen nicht mehr, sie sinken auf den unteren Rand des Bildes.

Sehen Sie diese Geige http://jsfiddle.net/s0pvgoqu/23/

Sind lange Wörter dichter als kurz?

---

EDIT ich meine Frage bin der Bearbeitung einige ergänzende Informationen zu der Antwort enthalten ich angenommen haben.

Es scheint, dass der einzige Weg, um dieses Problem zu lösen, die langen Wörter mit <wbr> Trags brechen.

ist hier mein Code <wbr> Tags in langen Wörtern

/* 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

Die einzige Lösung, die ich mir in den Sinn kam ist <wbr> zu verwenden Wort-Pausen andeuten.

Dies ist natürlich keine CSS-Lösung, die nicht in jeder Situation geeignet ist, aber es funktioniert auch gut mit Floated-Inhalten.

Answer 2

Add Wortumbruch einfügen: 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; 
}