获取LEGEND标签以正确包装文字 [英] Getting LEGEND tags to wrap text properly

问题描述

传奇标签总是很麻烦，因为它们不遵循很多CSS规则.

Legend tags are always a nuisance as they don't adhere to a lot of CSS rules.

我正在尝试使用LEGEND标记中的文本进行包装，使用典型的解决方案，即使用跨度将文本封装在LEGEND中，并设置width和display:block.

I'm trying to get the text within a LEGEND tag to wrap using the typical solution of wrapping the text in the LEGEND with a span and setting the width and display: block.

 <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中似乎不再可用.样本:

I thought this used to work In Firefox, but does not appear to work anymore in 3.6. Sample:

http://jsbin.com/exeno/5

它仍然可以在IE中使用.

It still works in IE.

有人找到了解决方法吗?还是只是放弃了LEGEND标签并回到了H#标签?

Has anyone found a fix for this or is it just a matter of forgoing LEGEND tags and go back to H# tags?

推荐答案

是否需要使用<span>标记?我可以使用<div>标记并删除dislay: block;元素(因为在这种情况下不需要)来使它在Firefox 3.6.2中工作，如下所示.

Is it a requirement to use the <span> tag? I was able to get this working in Firefox 3.6.2 using a <div> tag and removing the dislay: block; element (as it is not needed in that case) as follows.

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

至少是一种替代方法，除非您必须使用<span>标记.

It is at least an alternative unless you must use the <span> tag.

这篇关于获取LEGEND标签以正确包装文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！