CSS: Wrap text of image caption? 1

[LFCfan]

Hi folks,

My CSS knowledge is very sparse. I'm trying to wrap the text of a caption that is longer than the image's width. Googling hasn't got me anywhere, is there a simple command/way of doing this that I'm not aware of?

Many thanks

_~LFCfan

 

[LFCfan]

I ended up using the following:

.imageCaption
{
    display: block;
    min-width: 120px;
    max-width: 120px;
    _width:120px;
    padding:5px;
	font-size:x-small;	
	text-align:left;
	
}

Seems to work okay, but then we know the images are all going to be 120px in width as they are controlled by our CMS.

I would be interested if anyone knows of a less "hard-coded" way that doesn't involve tables

Thanks.



_~LFCfan

 

[ChrisHirst]

if it's a fixed width container and the text contains spaces it should wrap on the space.

What exactly is happening to yours and do we get code or a URI to look at?

Chris.

Indifference will be the downfall of mankind, but who cares?
Woo Hoo! the cobblers kids get new shoes.
People Counting Systems

So long, and thanks for all the fish.

 

[LFCfan]

Hi Chris,
It was not a fixed width container, and the text was not automatically wrapping. The image has a width specified, so using the CSS I posted above seemed to do the trick.

Below is the HTML I had to play with.

        <div class="imageContainer">
                <img id="..." src="..." alt="Involving our customers" 
                    style="width:130px;border-width:0px;" />
                <div class="captionColorHack">
                    <span id="..." class="imageCaption">Some text</span>

                </div>
        </div>

_~LFCfan

 

[Vragabond]

This however is ridiculously complex way of saying it should be 120px wide. You say no more than 120px, no less than 120px and employ a hack for IE6 to make it 120px. How about just putting 120px for the width

.imageCaption
{
    display: block;
    [s]min-width: 120px;
    max-width: 120px;
    _width:120px;[/s]
    [b]width: 120px;[/b]   
    padding:5px;
    font-size:x-small;    
    text-align:left;
}

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[LFCfan]

Vragabond,

I thought I had tried just setting the width, and it didn't work so I kept trying more things. Maybe I hadn't included display: block; at the time.

Thanks, I have now used your suggestion


_~LFCfan

 

[Foamcow]

Not including display:block will make a difference if the element you are applying the class to is an inline element such as a <span>.
Inline elements cannot have a specified width.


I see you are using a span within a div so that would be it.

Incidentally, I don't know what captionColorHack is but you can apply multiple classes to a single element like so

<div class="captionColorHack caption">

You might be able to remove the span altogether or else use a <p> instead of the <div><span>

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[LFCfan]

Thanks Foamy,
That makes sense about the span.

It's actually HTML I can't make any changes to - gets generated by our CMS which was developed by someone else... and I daren't touch the source of that behemoth till he's back from holiday!



_~LFCfan