Want text to wrap inside div

Question

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>

Mr. Alien · Accepted Answer · 2013-12-19T08:08:25.313

1

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.

edited Dec 19 '13 at 08:08

answered Dec 19 '13 at 07:56

Mr. Alien

153,751
34
298
278

2

From the question: "NOTE: the width of the images can vary. It is not a fixed width." – Kobi Dec 19 '13 at 07:57
That's pretty close but I notice that there is a small amount of padding on the right side of the image with your code. Any way to remove that? And how can I remove the padding from the other images? – Johann Dec 19 '13 at 08:00
@AndroidDev I've fixed the wrapper element, just assign some fixed height and use `font-size: 0;` http://jsfiddle.net/Asu7V/19/ and than assign some size to the text wrapper `div` – Mr. Alien Dec 19 '13 at 08:03
@AndroidDev Or you can use `display: block;` for your images http://jsfiddle.net/Asu7V/21/ – Mr. Alien Dec 19 '13 at 08:06
I've never seen this before: ".x > div" What does the greater sign mean? – Johann Dec 19 '13 at 08:06
1

@AndroidDev that means select element which is direct child to parent, will throw you an example, and for your thing, use `display: block;` for `img` tag, that's better – Mr. Alien Dec 19 '13 at 08:09
@AndroidDev Also check [this answer](http://stackoverflow.com/a/18429014/1725764) to figure out the reason of 5px gap at the bottom of the images. – Hashem Qolami Dec 19 '13 at 08:11
@AndroidDev http://jsfiddle.net/tj3dE/ if you won't use that, than see what it selects http://jsfiddle.net/tj3dE/1/ – Mr. Alien Dec 19 '13 at 08:12

NoobEditor · Answer 2 · 2013-12-19T08:07:10.233

0

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;
    }

edited Dec 19 '13 at 08:07

answered Dec 19 '13 at 08:01

NoobEditor

15,563
19
81
112

I made a slight adjustment to your code but the right border is inset by a few pixels. Otherwise, your solution is better than Mr. Aliens because it doesn't rely on a fixed width. Any way to fix the right border? http://jsfiddle.net/AndroidDev/Asu7V/23/ – Johann Dec 19 '13 at 08:22
@AndroidDev : if its 2-3px and permissible by you, then `overflow:hidden` is a solution as its not making much of a difference in image => http://jsfiddle.net/Asu7V/24/ **OR** if you want precision with the width, this is another way(but i wont prefer it) => http://jsfiddle.net/Asu7V/25/......my suggestion, go with `overflow` if you can ignore some pixels!! – NoobEditor Dec 19 '13 at 09:23

score 0 · Answer 3 · answered Dec 19 '13 at 08:03

0

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.

answered Dec 19 '13 at 08:03

Nishant

821
7
17

Want text to wrap inside div

3 Answers3