CODEWITHSUNDEEP
htmlcssimagealt-attribute
Khan
Khan

Reputation: 2982

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.

Upvotes: 7

Views: 8133

Answers (7)

Simon_Weaver
Simon_Weaver

Reputation: 145880

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

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

enter image description here

Upvotes: 1

mangalbhaskar
mangalbhaskar

Reputation: 71

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.

Upvotes: 3

The Emperor
The Emperor

Reputation: 1

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.

Upvotes: 0

Khan
Khan

Reputation: 2982

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.

Upvotes: 6

Karinne
Karinne

Reputation: 249

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

Upvotes: 1

Kurru
Kurru

Reputation: 14321

Just dont have the alt text as long if possible

Upvotes: -1

Dan Rosenstark
Dan Rosenstark

Reputation: 69747

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.

Upvotes: 2

Related Questions