使用 CSS 设计损坏的图像替代文本

Question

对于我的电子商务网站，我对带有lazysizes图像使用延迟加载。 为了提供符合img标签，这些标签包含一个空的src="data:," ，这个线程建议非常简洁。

因此，所有的延迟加载图像显示为一个残缺的图像alt文字，直到他们达到视口。 问题是，这些alt文本包含的产品名称可能很长，因此该文本有时会溢出图像边界并破坏布局（即响应式）：

是否有跨浏览器的解决方案来为图像设置alt文本样式？

编辑值得一提的是，我正在谈论包含较少或没有空格的alt文本，因此它不会自动换行。

Answer 1

我不相信这里有任何出色的纯 CSS 解决方案。 正如其他人在评论中指出的那样，少量的 JS 在这里会有很长的路要走。

也就是说，这里有一些简单的 CSS 可以改善丢失图像上的 alt 标签的外观。

关键样式是white-space: pre-wrap; , text-overflow: ellipsis; ，和overflow: hidden; . 这些组合将自动断开长字符串，为长字符串添加省略号，并垂直切断替代文本。

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

Answer 2

解决方法很简单。 只需使用word-break: break-word; 在img标签上

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