如何使<legend>文本换行？

Question

通常<legend>文字很短,所以我不知道这是一个问题,直到我昨天碰到它.我正在尝试并且未能在a上设置50%的宽度<fieldset>,但由于长的图例文本而无法工作.字段集不会小于图例,或者图例的宽度超过字段集的宽度.

这似乎不是 IE8,Chrome,Safari,Opera和其他人的问题.这是 Firefox,IE6和IE7中的一个问题.

目标:获取文本以包装在<legend>跨浏览器中

...但是只有一个答案<div>在图例标签内部使用固定宽度,我实际上无法使其工作(请参阅小提琴),并且OP结束时评论"我们最终放弃了" .谷歌搜索这个主题也变得很多"不多".

我用一些我试过的CSS 设置了一个jsfiddle演示.就像我说的那样,我以前从未遇到过这种情况,所以我很困惑,这很困难,我似乎无法得到任何工作.这真的不可能吗？

Answer 1

white-space: normal;除IE7和IE6外,添加到图例的工作正常.请看这个jsfiddle演示

在使用CSS玩了一下后,我通过在下面的CSS中添加了一个<span>内置的IE7,IE8,IE9,FF3-4和Chrome11 <legend>:

legend {
    white-space: normal; 
    width: 100%;
    *margin-left: -7px;
}
legend span {
    display:block;
    width: 100%;
}

请看看这个jsfiddle

Answer 2

问题发布已经有一段时间了,但是现在IE10已经存在了一段时间,而且仍然是sux而且非常"现代".另外一个人没有能力使用条件评论.这是诀窍:

legend {
  white-space: normal;
  display: table; /* IE10 */
}

Answer 3

添加white-space:normal到您的图例以强制文本换行.

legend{
    color:green;
    white-space:normal;
}