Styling broken image alt-text with CSS

Question

For my e-commerce site I'm using lazy loading for images with lazysizes. To provide conform img tags these contain an empty src="data:," suggest by this thread which is really neat.

So all lazy loaded images are display as a broken image with alt text until they reach view port. The problem is, that these alt texts contain product names which can be really long, so this text overflows image bounds sometimes and breaks layout (i.e. responsive):

Is there a cross-browser solution out there to style alt texts for images?

EDIT It's important to mention, that I'm talking about alt texts containing less to no whitespaces, so it would not line-break automatically.

Does this answer your question? [Can I style an image's ALT text with CSS?](https://stackoverflow.com/questions/7101743/can-i-style-an-images-alt-text-with-css) — Anurag Srivastava, Dec 21 '19 at 08:58
@AnuragSrivastava The thread mentioned is about font color. The problem here is, that text is overflowing the boundaries. — rabudde, Dec 21 '19 at 09:13
@AnuragSrivastava You mean, a `word-break: break-all` or `overflow: hidden` will also apply to `alt` text and will work in all browsers? — rabudde, Dec 21 '19 at 09:17
Not sure actually, found a related question: https://stackoverflow.com/questions/2731484/can-i-wrap-img-alt-text — Anurag Srivastava, Dec 21 '19 at 09:17
If you're using javascript, I think it can be easier. Try to cut the text to a variable and wait until the image is loaded successful, then pasting it back. — Tân, Dec 21 '19 at 09:29
Javascript is evaluated on load first, so this would lead to broken layout nevertheless until DOM is loaded completely. A pure CSS solution is the only option. — rabudde, Dec 21 '19 at 09:41
@AnuragSrivastava the other link is related to texts that contain any whitespaces. For these cases a fixed width of a container may work. As I have no influence on the product names, there are often names without any whitespace (see my example). And in that case a fixed width is ignored, text will overflow container. — rabudde, Dec 21 '19 at 09:43
It seems that `overflow:hidden` will work in most cases (https://stackoverflow.com/questions/47461916/img-size-when-displaying-alt-text) — rabudde, Dec 21 '19 at 09:51

score 1 · Answer 1 · answered Dec 21 '19 at 10:58

I don't believe there's any great CSS-only solution here. As others pointed out in the comments, a small amount of JS would go a long way here.

That said, here's some simple CSS which improves the appearance of the alt tag on missing images.

The key styles are the white-space: pre-wrap;, text-overflow: ellipsis;, and overflow: hidden;. The combo of these will automatically break long strings, add an ellipsis to long strings, and cut-off the alt text vertically.

img {
  display: inline-block;
  font-family: Arial;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-wrap;
}

<img src="missing.jpg" width="200" height="100" alt="A really long description of an image that won't load">

<img src="missing.jpg" width="200" height="100" alt="An alt tag containing a URL - https://stackoverflow.com/questions/59434846/styling-broken-image-alt-text-with-css ">

score 0 · Accepted Answer · answered May 24 '20 at 07:37

The solution is simple. Simply use word-break: break-word; on img tags

img {
  border: 3px solid red;
  max-width: 250px;
}
.wrap-broken {
  word-break: break-word;
}

<img alt="LLOYD Herren Businessschuh Don, Männer Schnürhalbschuhe,Halbschuh,Schnürschuh,Schnürer,Derby Schnürung,Anzugschuh,Office,Büro,REH/Stone,5.5 UK / 38.5 EU" src="https://www.kleiderliebe.de/herren/schuhe/anzugschuhe/lloyd-herren-businessschuh-don-maenner-schnuerhalbschuhe-halbschuh-schnuerschuh-schnuerer-derby-schnuerung.img">
<br><br>
<img class="wrap-broken" alt="LLOYD Herren Businessschuh Don, Männer Schnürhalbschuhe,Halbschuh,Schnürschuh,Schnürer,Derby Schnürung,Anzugschuh,Office,Büro,REH/Stone,5.5 UK / 38.5 EU" src="https://www.kleiderliebe.de/herren/schuhe/anzugschuhe/lloyd-herren-businessschuh-don-maenner-schnuerhalbschuhe-halbschuh-schnuerschuh-schnuerer-derby-schnuerung.img">

Styling broken image alt-text with CSS

2 Answers2