1

对于我的电子商务网站，我对带有lazysizes. 为了提供符合标签，这些标签包含这个img线程的一个空src="data:,"建议，这真的很整洁。

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

在此处输入图像描述

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

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

4

2 回答 2

1

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

于 2019-12-21T10:58:47.500 回答
0

解决方案很简单。只需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">

于 2020-05-24T07:37:05.030 回答