html – 如何使文本换行？

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

这在IE8,Chrome,Safari,Opera等也可能不是问题.这是Firefox,IE6和IE7中的一个问题.

目标：获取文字以包裹在< legend>跨浏览器

>不设定任何固定宽度
希望没有额外的标记
>没有javascript
>如果上述是不可能的,我们可以这样做
>不放弃使用不同的标签

我看过这篇文章：Getting LEGEND tags to wrap text properly

…但是只有一个答案使用< div>在图例标签内部有一个固定的宽度,我实际上不能让它工作(见小提琴),OP用注释“最终放弃”关闭.搜索这个话题也会有很多“不太多”.

我用一些我试过的CSS来建立一个jsfiddle demo.正如我所说,我从来没有遇到过这样的事情,所以我很困惑,这是非常困难的,我似乎无法做任何工作.真的是不可能吗？

解决方法

添加空格：正常;除了在IE7和IE6之外,传奇作品很好.请看这个 jsfiddle demo

在使用CSS播放一下之后,我通过添加< span>>在IE7,IE8,IE9,FF3-4和Chrome11上工作.在< legend>中与下面的CSS：

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

请看这个jsfiddle