代码之家 › 专栏 › 技术社区 › DA.

使图例标记正确包装文本

legend css

0

DA. · 技术社区 · 15 年前

图例标记总是令人讨厌的,因为它们不遵守很多css规则。

我正在尝试使用典型的解决方案来包装图例标记中的文本,该解决方案是使用跨距包装图例中的文本,并设置宽度和显示:块。

 <legend>
    <span style="border: 1px solid blue; width: 250px; display: block">
        This text should wrap if it gets longer than 250px in width
    </span>
 </legend>

我认为这在Firefox中曾经有效,但在3.6中似乎不再有效。Sample:

http://jsbin.com/exeno/5

在IE中仍然有效。

有没有人找到这个问题的解决方法,或者只是放弃图例标签,回到h标签的问题?

2 回复 | 直到 13 年前

1

Structure 15 年前

是否需要使用 <span> 标签?我可以在Firefox3.6.2中使用 <div> 标记并移除 dislay: block; 元素(在这种情况下不需要)如下。

<legend>
    <div style="border: 1px solid blue; width: 250px;">
        This text should wrap if it gets longer than 250px in width
    </div>
 </legend>

这至少是个选择除非你必须使用 <SPAN & GT; 标签。

2

John Conde 13 年前

想让同样的事情发生。在我的场景中,firefox需要

legend {white-space:normal;}