我可以换行 img alt 文本吗？

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.

Answer 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.

Answer 2

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.

Answer 3

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.

Answer 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

Answer 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.

Answer 6

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

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

Answer 7

如果可能的话，不要让替代文本尽可能长