Can i wrap img alt text?

Question

I have an image set by css style to 100x75. When it does not load, the alt text is loaded into space, but expands the container to a width of more than 100 pixels.

How can I prevent this? Either cut or wrap it.

Answer 1

Well, I figured it out to some extent. I just wrapped the image in a container of the same size. I assume that my browser (Firefox) did not wrap the text because it was an inline element.

Thank you all for your answers.

Answer 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 below). You cannot use markup in alt texts, although some browsers will present line breaks as line breaks (most will not, though). See this article for more details.

Answer 3

As an alternative:

• you can use overflow: hidden; for the image. It will hide the alt text that crosses the border of the image. Although he will not wrap the text.
• also reduce the size of the text.

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

The goal of alt Text is to show the screen reader about the image, so I think that reducing the font size and hiding overflow should work best. But of course, avoid using very long text.

Answer 4

The alt attribute is for alternative text; it should be short and describe the function that it has, or the content that it represents.

It reads well on this subject from Roger Johansson at 456 Berea Street - Writing a Good Text alt

In general, if you write a paragraph, then you are doing it wrong. Look at the use of the longdesc attribute (which is a link to a page describing the image that complements the alt text).

NTN

Answer 5

Just don't make text with text as long as possible

Answer 6

In Firefox, you can use the align:left attribute. This will prevent causing alignment problems, but overflow the available space. And for this you can use the corresponding font-size attribute.