Prevent single word from wrapping around float in css/html
css, css-float, html, word-wrap
Solution
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.
Problem
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.