破碎图像的替代文字溢出边界

Question

我已经设置了图像的宽度和高度，还测试了overflow:hidden，但alt文本中出现的损坏图像溢出了图像边界，并且图像尺寸也丢失了。如何限制图片框中的alt文本？

img{
width:100px;
height:100px;
border:1px solid #ff0000;
overflow:hidden;
}

<img src="http://www.example.com/broken.jpg" alt="This is a long text which overflows bounds of image">

Answer 1

使用div和alt文本包装图像标签不会超出范围。

div {
  width:100px;
  height:100px;
}

img{
  border:1px solid #ff0000;
  overflow:hidden;
}

<div> 
  <img src="http://www.example.com/broken.jpg" alt="This is a long text which overflows bounds of image">
</div>

Answer 2

任何“块化”图像的内容（浮动，弯曲，块，内联块，表格等）都会导致alt文本换行。

img{
width:100px;
height:100px;
border:1px solid #ff0000;
overflow:hidden;
float:left
}

<img src="http://www.example.com/broken.jpg" alt="This is a long text which overflows bounds of image">

img {
  width: 100px;
  height: 100px;
  border: 1px solid #ff0000;
  overflow: hidden;
  display: block;
}

<img src="http://www.example.com/broken.jpg" alt="This is a long text which overflows bounds of image">

img {
  width: 100px;
  height: 100px;
  border: 1px solid #ff0000;
  overflow: hidden;
  display: table;
}

<img src="http://www.example.com/broken.jpg" alt="This is a long text which overflows bounds of image">