代码之家 › 专栏 › 技术社区 › Ali Sheikhpour

断开图像的alt文本溢出边界

css html

Ali Sheikhpour · 技术社区 · 6 年前

我已经设置了图像的宽度和高度,还测试了 overflow:hidden 但是 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">

2 回复 | 直到 6 年前

Paulie_D 6 年前

任何“blockify”的图像(float、flex、block、inline block、table等)都会导致 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/break.jpg”alt=“这是一个长文本,溢出图像的边界”>

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

<img src=“http://www.example.com/break.jpg”alt=“这是一个长文本,溢出图像的边界”>

Sangsom 6 年前

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

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前