Question

<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>

我尝试了字段集和图例的最大宽度，自动换行，但标题显示在一行中，它释放了框宽并看起来很奇怪。

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

Answer 1

尝试简单地设置宽度：

legend {
    width: 540px;
}

http://jsfiddle.net/pHtpL/

Answer 2

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

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

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

Answer 3

对于旧版IE，您可以将内容放在span中。跨度将包装。对于其他所有事情white-space:normal应该可以做到。

修改，但您必须使用固定宽度:(

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

This solution甚至更好：）

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

Answer 4

只需在你的css中设置：

fieldset {
    width:200px;
}

您可以根据自己的意愿设置宽度尺寸

如何控制图例的宽度

4 个答案: