CSS: apply word-wrap break-word to fluid width text with floating image

Question

I need to break long words as for example long links. The layout I am working on is a fluid-layout, so no fixed width is provided. Instead of that, I need my text block to adjust to any container's width and get long words broken so that they justify to any width.

You have an example at http://jsfiddle.net/cYDJd/1/ in which you will see a long link which is not being broken by CSS rule word-wrap: break-word; while image is floating at the left. Only when the long link is below the image, word-wrap works fine.

Here you have the reduced version of JSFiddle's code:

CSS:

.left {
    float: left;
}
.justified-block {
    text-align: justify;
    word-wrap:break-word;
}

HTML:

<a href="#" class="left"><img src="some-image.jpg" /></a>
<p class="justified-block">Some text with a very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong link.</p>

I will appreciate very much your kind suggestions.

possible duplicate: http://stackoverflow.com/questions/6855979/break-long-word-around-floating-image — andi, Aug 22 '13 at 19:36
Thank you andi. I just had hope to solve it with CSS instead of PHP. Anyway, for the moment I will accept Susam's script as solution (http://stackoverflow.com/a/6856297/2253064) but I am going to use `` as `` is not supported in Opera yet. — Gerard, Aug 23 '13 at 09:54

score -1 · Answer 1 · answered Oct 05 '13 at 03:28

Something like this?

I didn´t check any browser support :/

http://jsfiddle.net/insan3/nrQFQ/2/

<style>
.block{
 width: 200px;
 display: block;
 border: 1px solid #DDD;
 display: table;
}

.block a{
 text-transform: uppercase;
}
.s1x{ font-size: 10px;}
.s2x{ font-size: 14px;}
.s3x{ font-size: 16px;}

.word-break{
 word-wrap: break-word;
 word-break: break-all;
 }
 </style>

<span class="block">
<p class="word-break"><a class="s1x" href="#">&bull;Current Lipsum Content Link Here it &bull;</a><a class="s3x" href="#">Current Lipsum Content Link Here it Current&bull;</a><a class="s1x" href="#"> Lipsum Content Link Here it Current Lipsum Content Link Here&bull;</a> <a class="s3x" href="#">it Current Lipsum Content Link Here it Current Lipsum Content Link Here it&bull;</a></p>

CSS: apply word-wrap break-word to fluid width text with floating image

1 Answers1