如何使 <legend> 文本换行？答案

【问题标题】：How can I make <legend> text wrap?如何使 <legend> 文本换行？
【发布时间】：2011-09-02 06:40:20
【问题描述】：

通常<legend> 文本很短，所以我不知道这是一个问题，直到我昨天遇到它。我试图在<fieldset> 上设置 50% 的宽度但未能成功，但由于图例文本过长，它无法正常工作。要么字段集不会小于图例，要么图例的宽度超过了字段集的宽度。

这不在 IE8、Chrome、Safari、Opera 和其他可能的系统中似乎不是问题。它是在 Firefox、IE6 和 IE7 中的问题。

目标：获取要在<legend>跨浏览器中换行的文本

...但是只有一个答案在图例标签内使用具有固定宽度的<div>，我实际上无法让它工作（见小提琴），并且OP以评论“in我们放弃的结局”。谷歌搜索这个主题也会出现很多“不多”。

我用一些我尝试过的 CSS 设置了 jsfiddle demo。正如我所说，我以前从未遇到过这种情况，所以我很困惑这是如此困难，而且我似乎无法得到任何工作。真的是不可能吗？

【问题讨论】：

嗯，它适用于 chrome，所以你的问题是 FF 和 IE？
还有恕我直言，那么长的文字不应该出现在图例中。图例应该是对字段集包含的内容的简短描述。任何其他文本，将其放在字段集（或外部）内的 p 中
嗯，好点子。我想可能只有火狐！ IE8、Safari、Chrome 和 Opera 都可以。是时候更新问题了...@corroded：是的，我完全期待这种回应，但它离题了。
@corroded 在移动设备上显示字段集时，即使是简短的描述也需要换行。

【解决方案1】：

将white-space: normal; 添加到图例中可以正常工作，但在 IE7 和 IE6 中除外。请看这个jsfiddle demo

在对 CSS 进行了一番尝试之后，我在 IE7、IE8、IE9、FF3-4 和 Chrome11 上使用了以下 CSS：在 <legend> 中添加了 <span>：

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

请看看这个jsfiddle

【讨论】：

啊哈，感谢您指出这一点。看来使用图例中的<div> 可以解决 IE7 和 IE6 的问题。 Updated fiddle without the extra CSS
看到你的更新：干得好！看起来我们需要为那些糟糕的浏览器添加额外的 div/span 元素。对于 IE
感谢您提供这个出色的解决方案。 IE10 也是一个问题。 span 技巧是修复包装所必需的。

【解决方案2】：

自从问题发布以来已经有一段时间了，但现在 IE10 已经存在了一段时间，而且仍然很“现代”。另外一个人无法使用条件注释。诀窍是这样的：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

这太完美了，我不敢相信它这么简单！感谢您的有趣和有用的文章。它似乎指的是FF2和FF3，所以很奇怪这个问题在FF4上仍然存在。设置此属性后，我还可以更多地控制图例。多么奇怪的标签。
@韦斯利；如果您愿意，很乐意提供帮助，然后接受对您有帮助的答案。

【解决方案4】：

试试这个更简单的方法：

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

这应该整理出你的传奇。您的下一个问题将成为您的字段集的背景颜色，但这很容易通过将整个事物包装在一个 div 中并为其设置样式来解决。

【讨论】：

是的，这很好用 - 虽然我没有看到 FF3 或 FF4 上的字段集的背景颜色有任何问题，但您指的是什么？
嗯 - 一定是 JSFiddle 的一个怪癖。灰色并不支持整个图例文本区域。
啊，你的意思是在上面？我认为这基本上是正常的传说行为，有点像vertical-align:middle。在图例中添加float:left 似乎可以解决这个问题，但这有点奇怪。

【解决方案5】：

如果有人需要在不干扰 Chrome/Firefox/Safari 的情况下适用于 Microsoft Internet Explorer 11 和 Edge 的修复：

legend {
  display: table;
  max-width: 100%;
}

【讨论】：