Html 使用CSS设置损坏的图像alt文本的样式

对于我的电子商务网站，我正在使用惰性加载来加载

lazysizes

的图像。为了提供conform

img

标记，这些标记包含一个空的

src=“data:，”

建议线程，这非常整洁

因此，所有延迟加载的图像都显示为带有

alt

文本的断开图像，直到它们到达查看端口。问题是，这些

alt

文本包含的产品名称可能非常长，因此该文本有时会溢出图像边界并破坏布局（即响应）：

是否有跨浏览器的解决方案来设置图像的

alt

文本样式

---

EDIT值得一提的是，我所说的

alt

文本包含的空格更少甚至没有空格，因此不会自动换行。

我不相信这里有什么好的CSS解决方案。正如其他人在评论中指出的那样，少量的JS将在这里起到很大作用

这就是说，这里有一些简单的CSS，它改进了缺失图像上alt标记的外观

关键样式是

空白：预换行，
文本溢出：省略号
和
溢出：隐藏。它们的组合将自动打断长字符串，为长字符串添加省略号，并垂直截断alt文本


img{
显示：内联块；
字体系列：Arial；
文本对齐：居中；
溢出：隐藏；
文本溢出：省略号；
空白：预包装；
}
解决方案很简单。简单使用
断字：断字打开
img
标签


img{
边框：3倍纯红；
最大宽度：250px；
}
.包装破损{
断字：断字；
}




这是否回答了您的问题@AnuragSrivastava提到的线程是关于字体颜色的。这里的问题是，文本溢出了边界。@AnuragSrivastava你的意思是，
单词break:break all
或
overflow:hidden
也将应用于
alt
文本，并将在所有浏览器中工作？实际上不确定，发现了一个相关的问题：如果你使用javascript，我认为它会更容易。尝试将文本剪切为变量，并等待图像加载成功，然后将其粘贴回去。