Can I wrap img alt text?

问题

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.

回答1:

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.

回答2:

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.

回答3:

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.

回答4:

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

回答5:

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.

回答6:

Just dont have the alt text as long if possible

来源：https://stackoverflow.com/questions/2731484/can-i-wrap-img-alt-text