Clever Geek Handbook

Preventing single word traversal with float in css / html

Is there a way to prevent one or two words from wrapping around the float, but allow it if there is more text? Here's an example where the first text is problematic, but the second is ok.

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. Please note that I do not know in advance where the text will end. I'm looking for a generic solution if it exists. For example, some styling for ".last-text" that makes it not wrap around floats.

CSS / HTML solutions are preferred over JavaScript.

+3


source to share


6 answers


Avoiding one-word wrapping is easy: just use a space between the last two words instead of regular space (eg nostrud&nbsp;exercitation

).

However, I was afraid that this would not solve the real problem. In the case of the sample it would be to wrap two words, leaving the last but one line short. And if the text gets bigger, the two words will stick together, even if it's not necessary.



I'm afraid this problem will need some non-trivial JavaScript code that, after initial formatting, parses the height of the text block versus the height of the image and changes the style according to some criteria.

+8


source


Just add padding-bottom: 1px;

toimg

Demo

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


You can use right and left columns as well, yes I used inline style of course, but if you want to go for this approach than make the class clear and get rid of the inline style

Demo 2

+3


source


Sorry - not a definite answer, but I asked the same question a while ago. One of the answers I received there was promising (using JS), but so far I have not been able to process it. My question also uses an image to illustrate the problem, which might be helpful.

I run into this problem all the time in responsive layouts using CMS

Awkward wrap line around the image

+1


source


The solution is to increase the class width slightly .wrapper

.

here is the class .wrapper

:

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

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

0


source


Add overflow: hidden

in .text

if you don't want the text to wrap under the float.

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

0


source


Browse different display styles. The table display (not the tags) does not overlap floating elements.

.text{
  display:table;
}
0


source






More articles:


All Articles