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

Question

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

因此所有延迟加载的图像都显示为带有 alt 文本的损坏图像，直到它们到达视口(viewport)。问题是，这些 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 ">