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

Question

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

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

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

EDIT 值得一提的是，我说的是 alt 包含较少甚至没有空格的文本，因此它不会自动换行。

Answer 1

我不相信这里有任何很棒的 CSS-only 解决方案。正如其他人在评论中指出的那样，少量的 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 -  ">

Answer 2

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

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

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

Styling broken image alt-text with CSS

html

css

broken-image