html - 损坏图像的替代文字溢出边界

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

任何“ block 化”图像的东西( float 、 flex 、 block 、内联 block 、表格等)都会导致 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">