Can I wrap img alt text?

Question

I have an image set by css style to 100x75. When it doesn't load, the alt text loads into the space, but expands the container to beyond 100px width.

How can I prevent this? Either by cutting it off or wrapping it.

score 6 · Accepted Answer · answered Apr 28 '10 at 18:14

6

Well, I figured it out to some degree. I just wrapped the image in a container of the same size. I guess my browser (Firefox) was not wrapping the text because it was an inline element.

Thanks everyone for your responses.

answered Apr 28 '10 at 18:14

Khan

2,912
3
21
21

score 3 · Answer 2 · edited Feb 11 '16 at 14:05

Alternatively:

you can use overflow: hidden; to the image. It will hide the alt text that crosses the image border. Though it will not wrap the text.
also, reduce the alt text size.

#idlogo img {    
    overflow: hidden;
    font-size: 10px;
}

The purpose of alt Text is to let the screen reader know about the image, so I think reducing the alt text size and hiding the overflow should work out best. But, of course avoid using very long text.

score 2 · Answer 3 · answered Apr 28 '10 at 16:52

In general, there is no way to control how alt texts are displayed, and most browsers produce their own version (some use tooltips, some in the status bar at the bottom). You cannot use markup in alt texts, though some browsers will represent a line-break as a line break (most won't, though). See this article for more.

score 1 · Answer 4 · answered Apr 28 '10 at 17:56

1

The alt attribute is for alternate text; it should be short and describe the function it has or the content it presents.

Here's a good read on the subject from Roger Johansson on 456 Berea Street - Writing good alt text

All in all, if you're writing a paragraph, then you're doing it wrong. Look at using the longdesc attribute (which is a link to a page describing the image that complements the alt text).

HTH

answered Apr 28 '10 at 17:56

Karinne

249
2
10

It's a search result of automotives that scales the image to 100x75. "2010 Honda Accord" goes beyond 100px... – Khan Apr 28 '10 at 18:16

score 1 · Answer 5 · answered May 26 '22 at 19:12

1

Just discovered at least in Chrome you can put overflow-wrap: break-word and it will wrap.

picture, img
{
   overflow-wrap: break-word;
}

answered May 26 '22 at 19:12

Simon_Weaver

140,023
84
646
689

Way better than simple `overflow: hidden`. I was looking for exactly this. – Bence Szalai Aug 18 '22 at 13:01

score 0 · Answer 6 · edited Nov 22 '12 at 13:19

0

For Firefox you can use the attribute align:left. This will prevent the alt text to cause the alignment issue but will overflow the available space. And for that you can use an appropriate font-size attribute.

edited Nov 22 '12 at 13:19

Lokesh Mehra

545
6
16

answered May 11 '11 at 10:07

The Emperor

1

score -1 · Answer 7 · answered Apr 28 '10 at 16:54

-1

Just dont have the alt text as long if possible

answered Apr 28 '10 at 16:54

Kurru

14,180
18
64
84

Can I wrap img alt text?

7 Answers7

Linked