使用 CSS 样式化损坏的图像替代文本答案

【问题标题】：Styling broken image alt-text with CSS使用 CSS 样式化损坏的图像替代文本
【发布时间】：2019-12-21 08:56:31
【问题描述】：

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

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

是否有一种跨浏览器解决方案可以为图像设置alt 文本样式？

编辑重要的是要提一下，我说的是alt 包含更少或没有空格的文本，因此它不会自动换行。

【问题讨论】：

这能回答你的问题吗？ Can I style an image's ALT text with CSS?
@AnuragSrivastava 提到的线程是关于字体颜色的。这里的问题是，文本超出了边界。
@AnuragSrivastava 你的意思是，word-break: break-all 或 overflow: hidden 也将适用于 alt 文本并且适用于所有浏览器？
其实不太清楚，找到一个相关的问题：stackoverflow.com/questions/2731484/can-i-wrap-img-alt-text
如果您使用的是javascript，我认为它会更容易。尝试将文本剪切成变量，等到图片加载成功，再粘贴回来。

标签： html css broken-image

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案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">

【讨论】：