如何控制图例的宽度答案

【问题标题】：how to control the width of legend如何控制图例的宽度
【发布时间】：2013-10-14 08:45:01
【问题描述】：

<FIELDSET>
<LEGEND> Here my title goes.which is too long and need to be displayed in 2 lines like word-wrap. 
Line 2: Please suggest!</LEGEND>
Name: <INPUT TYPE="text" SIZE="20">
Email: <INPUT TYPE="text" SIZE="20">
</FIELDSET>

我尝试了对 FieldSet 和 Legend 的最大宽度、自动换行，但标题显示在一行中，这增加了框的宽度并且看起来很奇怪。

**不是浏览器特定的问题

【问题讨论】：

这段没有任何额外格式的代码在 Firefox 中就是这样做的——一旦表单宽度变得太小而无法在一行中显示，它会在两行（或更多）中显示图例。
这是一个特定的浏览器问题吗？正如@CBroe 所说，图例在 Firefox 上自动换行。仅供参考，它也包含在 Chrome 和 Safari 中。也许问题出在其他地方？请您澄清问题。
@CBroe 我相信他希望它在达到窗口宽度之前换行。也就是说，max-width 应该可以工作。
也许white-space 已在某处设置为nowrap？确定设置white-space:normal;。
stackoverflow.com/questions/6133571/…的可能重复

标签： html css

【解决方案1】：

只需将 'width' CSS 属性设置为您想要的，文本就会自动换行

legend{ outline: 1px solid red; width: 100px; }

在这里提琴：http://jsfiddle.net/YTJUA/

【讨论】：

@nectar 这个答案中的演示很清晰。你能做一个 jsfiddle 来证明你的问题吗？

【解决方案2】：

尝试简单地设置宽度：

legend {
    width: 540px;
}

http://jsfiddle.net/pHtpL/

【讨论】：

【解决方案3】：

对于旧版 IE，您可以将内容放在 span 中。跨度将换行。对于其他一切white-space:normal 应该可以解决问题。

编辑：但你必须使用固定宽度:(

legend {
    white-space: normal; 
}
legend span {
    display:block; width:100px;
}

This solution 更好:)

legend {
    white-space: normal; 
    display:table;
}

【讨论】：

OMG @ IE... 如果将跨度设置为绝对宽度 it works。我已经相应地更新了我的答案。
我已经更新了我的解决方案。 display:table 似乎排序 >= IE8

【解决方案4】：

只需在你的 CSS 中设置：

fieldset {
    width:200px;
}

这里你可以根据自己的意愿设置宽度大小

【讨论】：