How to wrap text within a caption?

I have found a very lame solution to this problem. In the post, instead of opening a div to include the caption and image together (as described here) with this:

<div class=”caption right”>

I have added a style specification that is the exact width of the image:

<div class=”caption right” style=”width: 220px”>

But this is a pain because I have to know the width of the image each time and it’s extra typing when I write my post.

There must be an actual solution to this.

Anyone?

Because CSS2 doesn’t clearly define a text-wrap function, I would recommend either a overflow: none; or to just put hard returns in…

I have been trying to find an answer to this for days!

I have looked through pages of the forum. I have studied that one page about 10 times. I asked at the MistyLook forums.

Without a caption to a photograph or a drawing, the artist is not attributed, and there is no way to add any info about the image at all! It’s really terrible.

If someone chooses to use the directions on the Codex page, it completely invalidates any image style such as shadow, etc, that was there before.

Annaship11,I also have captions that will be longer than the photos. Can you give me a link, so I can see how you did it?

I tried putting this in style, but it didn’t work for me:
.caption
{
text-align: center;
margin: 5px;
padding: 5px;
border: solid 1px #ffffff;
background: #ffffff;
font-weight: bold;
font-style: italic;
}

Can someone please please share the secret on how to add captions? My site, if you need it: https://donnabarstow.com/park_blog

This topic IS a support question, and I can’t change the category.

Drawer,

Following the directions in the codex, I added this to my style.css file:

.caption {
background: white;
padding: 4px 0 4px 12px;
font-size:90%;
color: #644b19;
text-align: left;
}

I set the padding to 4, 0, 4, 12 because I always put my pictures embedded in the text of the post to the right, so I want there to be a nice space (12px) between the left edge of the image and the text, and no space between the right edge of the picture and the limit of the post column. I also set text-align to left, because otherwise the caption text would be justified just like my regular post text. Because the captions are often quite small, justifying the text can make it look spaced out and weird.

In order to get the text to wrap, I defined the width of the div to the exact number of pixels as the image itself. This is done in the post itself. (I have the visual rich editor turned off.) This is an example of what that looks like:

<div class=”caption right” style=”width: 250px”><img src=’https://thinkevolution.net/wp-content/uploads/2007/06/dadkeepingbees.jpg&#8217; alt=’dadkeepingbees.jpg’>My dad in the golden age of beekeeping, 1978.</div>

And this is what the picture actually looks like on my site:

Beekeeping post

Hope this helps.

Annaship, many thanks. I’ve tried your way several times, and have studied your page, thanks. (I like the color of your caption, too!)

In MistyLook, something seems to be stopping the caption part from working correctly. There is no padding around the caption words no matter what. And although I can now limit the caption to the width of the photo (great idea! and I made up a new quicktag just for captions!), you will see in the post titled Apres Fire, today, that there is a big chunk of space on the right that I can’t get the regular text to fill in properly.
(Whereas your pages wrap neatly around both the image and the caption.)

I tried moving both image and caption and style over to the right, but that means that the caption jumps up to the left, on the same line as the top of the photo, opposite it.

I notice in your stylesheet that you have Display:inline; for your images. I tried that out in the Firefox edit, but it didn’t seem to make a difference. I don’t know what to try next, because that huge whole on the left of the photo looks stupid.

Does anyone have any ideas on this?

My page again: https://donnabarstow.com/park_blog/

Now it’s even worse. WHY are my photos all clumping together here? It pushes all the captions to the right and up to the top.

I aligned all 3 photos to the left. I can’t get any space between them to put in br or p, to leave spaces.

You know, I’d just like to work on the blog as I AM GETTING SICK OF TRYING TO FIX THIS.

Can someone please please help???