alt文本中的换行符

Question

我是否可以在替代XHTML 1.0 Strict标准的图像的alt文本中使用某种换行符？

像这样......

<img src="foo.jpg" alt="Line 1\nLine 2" />

我问的是因为我想在我的网站上发布以下屏幕截图，但我想在替代文字中包含纯文字版本，以便出于搜索引擎优化和视障人士。

我更喜欢纯文本版本的屏幕截图，因为它看起来更具视觉吸引力。

Answer 1

只需使用正常的换行符。

<img src="foo.jpg" alt="Line 1
Line 2" />

Stack Overflow在他们的标题中执行此操作：）

然后添加这个CSS：

img{white-space:pre}

演示：http://jsfiddle.net/Madmartigan/S8SXP/

Answer 2

更好的方法是只添加换行符或回车符的HTML字符代码。

 line feed is &#10
 carriage return &#13

Answer 3

我想你可能会太努力了 alt文本应该是图像的替代，而不是它的某种文字表示。

正确标记等等，这将是一个带有子列表的无序列表，屏幕阅读器将从HTML元素的嵌套中获取关系信息。用一些换行符代替它来获得粗略的视觉近似并不是一回事，例如。你打算如何“显示”屏幕阅读器，显示第一次换行后的块是“内部”错误？
而且我怀疑搜索引擎会在alt文本中使用换行符而不是丢弃它们。 （不可否认是推测性的。）

你实际上之后以某种方式包括图像所具有的嵌套/关系信息，而是用文本代替。从“来自[app]的通知的屏幕截图开始，显示两个错误[详细信息如果您需要]和两个信息项[详细]”等。

或者你可以变得非常迂腐，实际上是用HTML创建列表，然后使用图像替换技术来插入图像。

Answer 4

@purch的答案是我不知道的。 然而，在整个应用程序中将空白分解为BR都会成为开销。

作为最简单的解决方案，您只需提供

即可

img.class { overflow:hidden }

快速而又肮脏地克服它。

Answer 5

对我来说，img { white-space: pre; } 是不可行的，因为它阻止了替代文本的换行并使其溢出图像边界（debian 上的铬）。我使用的解决方案是添加大量   直到文本转到下一行。希望屏幕阅读器会将其作为空格忽略。