CODEWITHSUNDEEP
htmlword-wrapcss
Johann
Johann

Reputation: 29877

Want text to wrap inside div

In my code below, I have 3 images with a caption below some images. I don't want the width of the text to exceed the width of the image. NOTE: the width of the images can vary. It is not a fixed width. If the text exceeds the width of the image, the text needs to wrap. Another problem I have in the code below is that the second and third images show some padding at the bottom of the image. The border around this image should have no padding.

http://jsfiddle.net/AndroidDev/Asu7V/15/

<div style="width:300px; overflow-x: auto;white-space: nowrap;">
    <div style="vertical-align:top">
        <div class="x">
            <img src="http://25.media.tumblr.com/avatar_dae559818d30_128.png" />
            <div style="white-space:wrap">Grumpy Cat is a famous cat</div>
        </div>
        <div class="x">
            <img src="http://scottsdalepethotel.com/wp-content/uploads/et_temp/cat-648150_128x128.jpg" />
            <img src="http://playgo.ro/wp-content/themes/play3.0/play.png" style="position:absolute; left:0; top:0" />
        </div>
        <div class="x">
            <img src="http://blog.sureflap.com/wp-content/uploads/2011/11/Maru.jpg" />
        </div>
    </div>
</div>

Upvotes: 1

Views: 1209

Answers (3)

Mr. Alien
Mr. Alien

Reputation: 157404

Since you are not assigning any width to your div element so assign it, and than use white-space: normal;

<div style="white-space: normal; width: 130px;">Grumpy Cat is a famous cat</div>

Demo

Again, would like to warn you that avoid using inline styles..

Also, when you fix the wrapper div which contains only image, it is better to use max-width and max-height for your img so it will ensure that it won't overflow.

Also, last but not the least, consider using a p element instead of div which will give some semantic meaning to your text.

You were using white-space: wrap; where wrap is not a valid value for white-space property, so you will need normal

As you commented, you want to get rid of white space on either side, so for that, fix the wrapper element by assigning some fixed width to the wrapper element, and for the white space below the image issue, can be fixed by either using font-size: 0; on the wrapper element and than assigning some font-size to the text, or the better way to go is to use display: block; for your img element.

Upvotes: 1

NoobEditor
NoobEditor

Reputation: 15921

Width is missing from you css, here is a demo : DEMO

HTML

<div style=""><span class="text">Grumpy Cat is a famous cat</span>

CSS

 .text {
        vertical-align:top;
        display:inline-block;
        white-space:normal;
        word-wrap: break-word;
        width:70%;
        max-width:70%;
    }
    .x {
        border:1px solid #000000;
        display:inline-block;
        white-space:nowrap;
        position:relative;
        width:42%;
        vertical-align: top;
    }

Upvotes: 0

Nishant
Nishant

Reputation: 916

An easy way to do it would be wrap your image and the text in one div so that when your image size increases it will also provide the same area for text to flow and will not go beyond the image as well.

Upvotes: 0

Related Questions