I need to display some text inside a box.
To achieve this, I enclose my text within an <article> element.
<article>
<p>Here is the text that I want to display in a box.</p>
</article>
I then style it as a block with fixed width, enable word wrapping for long words, and hide overflowing text:
article {
display: inline-block;
width:160px;
overflow: hidden;
word-wrap: break-word;
}
Everything works fine so far. The text wraps correctly and long words break and wrap accordingly.
The issue arises when I add a floating image before the text.
<article>
<img src="img.png"></img>
<p>Now, here is the text with an image preceding it.</p>
</article>
The image is styled to float left of the text.
img {
width: 32px;
float: left;
}
If the text contains only short words, the image floats and wraps correctly. However, long words do not float anymore, instead they drop down to the bottom of the image.
For a demonstration, you can refer to this fiddle http://jsfiddle.net/s0pvgoqu/23/
Do long words have more weight than shorter ones?
UPDATEI am updating my question to include additional information based on the accepted answer.
It appears that the only solution to this problem is to insert <wbr> tags to break long words.
Below is the code snippet for inserting <wbr> tags in long words:
/* Inserting word break hint tags in long words at specific positions */
String.prototype.wbr = function(num) {
return this.replace(
RegExp("(\\w{" + num + "})(\\w)", "g"),
function(match,submatch1,submatch2){return submatch1 + "<wbr>" +submatch2}
);
}