我可以换行 img 替代文本吗?

发布于 2024-08-30 06:29:01 字数 111 浏览 2 评论 0原文

我有一个由 css 样式设置为 100x75 的图像。当它不加载时,替代文本会加载到空间中,但会将容器扩展到超过 100 像素宽度。

我怎样才能防止这种情况发生?要么把它剪掉,要么把它包起来。

I have an image set by css style to 100x75. When it doesn't load, the alt text loads into the space, but expands the container to beyond 100px width.

How can I prevent this? Either by cutting it off or wrapping it.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(7

并安 2024-09-06 06:29:01

好吧,我在某种程度上明白了。我只是将图像包装在相同大小的容器中。我猜我的浏览器(Firefox)没有包装文本,因为它是一个内联元素。

感谢大家的回复。

Well, I figured it out to some degree. I just wrapped the image in a container of the same size. I guess my browser (Firefox) was not wrapping the text because it was an inline element.

Thanks everyone for your responses.

思念满溢 2024-09-06 06:29:01

或者:

  • 您可以对图像使用overflow:hidden;。它将隐藏跨越图像边界的替代文本。虽然它不会换行文本。
  • 另外,减小替代文本的大小。

 

#idlogo img {    
    overflow: hidden;
    font-size: 10px;
}

替代文本的目的是让屏幕阅读器了解图像,因此我认为减小替代文本大小并隐藏溢出应该是最好的结果。但是,当然要避免使用很长的文本。

Alternatively:

  • you can use overflow: hidden; to the image. It will hide the alt text that crosses the image border. Though it will not wrap the text.
  • also, reduce the alt text size.

 

#idlogo img {    
    overflow: hidden;
    font-size: 10px;
}

The purpose of alt Text is to let the screen reader know about the image, so I think reducing the alt text size and hiding the overflow should work out best. But, of course avoid using very long text.

梦巷 2024-09-06 06:29:01

一般来说,无法控制替代文本的显示方式,并且大多数浏览器都会生成自己的版本(有些使用工具提示,有些在底部的状态栏中)。您不能在替代文本中使用标记,尽管某些浏览器会将换行符表示为换行符(但大多数浏览器不会)。有关详细信息,请参阅本文

In general, there is no way to control how alt texts are displayed, and most browsers produce their own version (some use tooltips, some in the status bar at the bottom). You cannot use markup in alt texts, though some browsers will represent a line-break as a line break (most won't, though). See this article for more.

红尘作伴 2024-09-06 06:29:01

alt属性用于替代文本;它应该简短并描述它所具有的功能或它所呈现的内容。

以下是 Roger Johansson on 456 Berea Street 撰写的关于该主题的好读物 - 编写好的替代文本

总而言之,如果您正在写一个段落,那么您就做错了。查看使用 longdesc 属性(这是一个指向描述补充替代文本的图像的页面的链接)。

华泰

The alt attribute is for alternate text; it should be short and describe the function it has or the content it presents.

Here's a good read on the subject from Roger Johansson on 456 Berea Street - Writing good alt text

All in all, if you're writing a paragraph, then you're doing it wrong. Look at using the longdesc attribute (which is a link to a page describing the image that complements the alt text).

HTH

浮华 2024-09-06 06:29:01

刚刚发现至少在 Chrome 中你可以输入 overflow-wrap:break-word 并且它会换行。

picture, img
{
   overflow-wrap: break-word;
} 

输入图片此处描述

Just discovered at least in Chrome you can put overflow-wrap: break-word and it will wrap.

picture, img
{
   overflow-wrap: break-word;
} 

enter image description here

停滞 2024-09-06 06:29:01

对于 Firefox,您可以使用属性 align:left。这将防止替代文本
导致对齐问题,但会溢出可用空间。为此,您可以使用适当的字体大小属性。

For Firefox you can use the attribute align:left. This will prevent the alt text to
cause the alignment issue but will overflow the available space. And for that you can use an appropriate font-size attribute.

青巷忧颜 2024-09-06 06:29:01

如果可能的话,替代文本不要太长

Just dont have the alt text as long if possible

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文