我可以换行 img 替代文本吗?
我有一个由 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(7)
好吧,我在某种程度上明白了。我只是将图像包装在相同大小的容器中。我猜我的浏览器(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.
或者:
overflow:hidden;
。它将隐藏跨越图像边界的替代文本。虽然它不会换行文本。替代文本的目的是让屏幕阅读器了解图像,因此我认为减小替代文本大小并隐藏溢出应该是最好的结果。但是,当然要避免使用很长的文本。
Alternatively:
overflow: hidden;
to the image. It will hide the alt text that crosses the image border. Though it will not wrap the text.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.
一般来说,无法控制替代文本的显示方式,并且大多数浏览器都会生成自己的版本(有些使用工具提示,有些在底部的状态栏中)。您不能在替代文本中使用标记,尽管某些浏览器会将换行符表示为换行符(但大多数浏览器不会)。有关详细信息,请参阅本文。
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.
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
刚刚发现至少在 Chrome 中你可以输入
overflow-wrap:break-word
并且它会换行。Just discovered at least in Chrome you can put
overflow-wrap: break-word
and it will wrap.对于 Firefox,您可以使用属性
align:left
。这将防止替代文本导致对齐问题,但会溢出可用空间。为此,您可以使用适当的字体大小属性。
For Firefox you can use the attribute
align:left
. This will prevent the alt text tocause the alignment issue but will overflow the available space. And for that you can use an appropriate font-size attribute.
如果可能的话,替代文本不要太长
Just dont have the alt text as long if possible