htmlcssbroken-image

Styling broken image alt-text with CSS

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):

enter image description here

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.

Solution

  • 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">