Как я могу сделать <legend>перенос текста?

Question

Обычно <legend> текст довольно короткий, поэтому у меня было понятия не имею , что это было проблемой, пока я не столкнулся с этим вчера.Я пытался и не смог установить 50% ширину на <fieldset>, но это не сработало из-за длинного текста легенды.Либо набор полей не будет меньше легенды, либо ширина легенды будет больше ширины набора полей.

Этот не кажется проблемой в IE8, Chrome, Safari,Опера, а может и другие.Это проблема в Firefox, IE6 и IE7.

Цель: Получить текст для переноса в <legend> кросс-браузер

• Без установки фиксированной ширины
• Надеемся, без дополнительной разметки
• Без JavaScript
• Любым способом, если вышеперечисленное невозможно
• Без отказаи используя другой тег

Я видел этот пост: Получение тегов LEGEND для правильного переноса текста

... Но есть только один ответкоторый использует <div> с фиксированной шириной внутри тега легенды, я на самом деле не могу заставить его работать (см. скрипку), и OP закрылся с комментарием «в конце концов, мы отказались».Поиск в этой теме также приводит к «небольшому» значению.

Я выложил jsfiddle demo с некоторыми CSS, которые я пробовал.Как я уже говорил, я никогда не сталкивался с этим раньше, поэтому я сбит с толку, что это так сложно, и я не могу заставить что-то работать.Это действительно просто невозможно?

Answer 1

Добавление white-space: normal; к легенде работает нормально, за исключением IE7 и IE6. Пожалуйста, посмотрите это jsfiddle демо

Немного поиграв с CSS, я начал работать с IE7, IE8, IE9, FF3-4 и Chrome11, добавив <span> внутри <legend> с помощью CSS:

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

Пожалуйста, посмотрите на это jsfiddle

Answer 2

Прошло много времени с тех пор, как вопрос был опубликован, но теперь IE10 уже некоторое время здесь и все еще остается достаточно «современным».кроме того, никто не может использовать условный комментарий.Вот что делает трюк:

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

Answer 3

Добавьте white-space:normal к вашей легенде, чтобы заставить текст переноситься.

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

Подробнее читайте в этой статье: http://beckism.com/2008/12/display_block_legend/

Answer 4

Попробуйте этот более простой подход:

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

Это должно разобрать твою легенду. Ваша следующая проблема станет цветом фона вашего набора полей, но это легко решается, обернув все это в div и стилизуя это.

Answer 5

В случае, если кому-то нужно исправление, которое работает для Microsoft Internet Explorer 11 и Edge, но не мешает работе Chrome / Firefox / Safari:

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