Prevent single word from wrapping around float in css/html

Question

Is there any way to prevent a single word or two from wrapping around a float, but allow it if there is more text? Here is an example where the first text is problematic, but the second text is fine.

http://jsfiddle.net/wdPCp/

<div class="wrapper">
<img src="http://lorempixel.com/100/100/animals" />
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <span class="last-bit">labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</span></div>
</div>

<div class="wrapper">
<img src="http://lorempixel.com/100/100/animals" />
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span class="last-text">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></div>
</div>

CSS:

img {
    float:left;
    margin:10px;
    width:100px;
    height:100px;
}

.wrapper {
    width:300px;
    margin-bottom:20px;
}

.text {
}

.last-text {
}

Update: Note that I don't know in advance where the text will wrap - I'm looking for a general solution, if it exists. For example, some style for ".last-text" that causes it to not wrap under a float.

CSS/HTML solutions are preferable over JavaScript.

Answer 1

Preventing single-word wrapping is easy: just use a no-break space between the last two words, instead of a normal space (e.g., nostrud exercitation).

However, I’m afraid this would not solve the real problem. In the sample case, there would be a two-word wrap, leaving the last but one line short. And if text gets larger, the two words would stick together even when there is no need for that.

I’m afraid that problem would need some nontrivial JavaScript code that analyzes, after initial formatting, the height of the text block as compared with the height of the image and changes styling by some criteria.

Answer 2

Just add padding-bottom: 1px; to img

Demo

img {
    float:left;
    margin:10px;
    width:100px;
    height:100px;
    padding-bottom: 1px;
}

You can also use right and left columns, yeah I've certainly used an inline style but if you want to go for this approach than make a class for clear and get rid of the inline style

Demo 2

Answer 3

Sorry - not a definite answer but I asked the same question a while back. One of the answers I received there was promising (using JS) but so far I haven't been able to work it out. My question also uses an image to illustrate the issue which might be helpful.

I come across this issue all the time in responsive layouts using a CMS

Awkward line wrap around image

Answer 4

The solution is to increase the .wrapper class width a little.

here is the .wrapper class:

.wrapper {
        width:330px;
        margin-bottom:20px;
    }

http://jsfiddle.net/wdPCp/4/

Answer 5

Add overflow: hidden to .text if you don't want the text to wrap under the float.

http://jsfiddle.net/wdPCp/6/

Answer 6

Look through the different display styles. Table display (not the tags) do not under-wrap floated elements.

.text{
  display:table;
}