如何制作文本换行?

| 通常“ 0”文本很短,所以直到昨天我碰到它之前,我都不知道这是个问题。我试图在
<fieldset>
上设置50%的宽度失败,但由于图例文字太长而无法使用。要么字段集不小于图例,要么图例的宽度超过字段集的宽度。 在IE8,Chrome,Safari,Opera以及其他操作系统中,这似乎不是问题。这是Firefox,IE6和IE7中的问题。 目标:获取要包装在
<legend>
跨浏览器中的文本 不设置任何固定宽度 希望没有额外的标记 没有JavaScript 如果以上都不可行,我们可以采取任何方法 不放弃并使用其他标签 我看过这篇文章:获取LEGEND标签以正确包装文字 ...但是,只有一个答案在图例标签内使用固定宽度的ѭ3,,我实际上无法使其正常工作(请参见小提琴),OP最后以注释“ \”结束放弃\”。谷歌搜索这个主题也会发现很多“不是很多”。 我用一些我尝试过的CSS制作了一个jsfiddle演示。就像我说的那样,我从来没有遇到过这个问题,所以我感到困惑,这是如此的困难,而且我似乎什么也无法工作。真的只是不可能吗?     
已邀请:
除了在IE7和IE6中之外,在图例中添加
white-space: normal;
都可以。请看这个jsfiddle演示 在玩完CSS之后,我通过在带有以下CSS的
<legend>
内添加了
<span>
,使其在IE7,IE8,IE9,FF3-4和Chrome11上正常工作:
legend {
    white-space: normal; 
    width: 100%;
    *margin-left: -7px;
}
legend span {
    display:block;
    width: 100%;
}
请看看这个jsfiddle     
自问题发布以来已经有一段时间了,但是现在IE10在这里已经有一段时间了,并且在发出“现代”的同时仍然很帅。另外,一个人不能使用条件注释。这就是窍门:
legend {
  white-space: normal;
  display: table; /* IE10 */
}
    
在图例中添加“ 9”以强制文本换行。
legend{
    color:green;
    white-space:normal;
}
有关更多信息,请阅读本文:http://beckism.com/2008/12/display_block_legend/     
试试这个更简单的方法:
legend{
    color:green;
    white-space: normal;
}
那应该可以解决您的图例。下一个问题成为字段集的背景色,但是可以通过将整个内容包装在div中并设置样式来轻松解决。     
如果有人需要适用于Microsoft Internet Explorer 11和Edge且不干扰Chrome / Firefox / Safari的修复程序:
legend {
  display: table;
  max-width: 100%;
}
    

要回复问题请先登录注册