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

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

Это, похоже, не проблема в IE8, Chrome, Safari, Opera и, возможно, другие. Это проблема в Firefox, IE6 и IE7.

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

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

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

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

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

Ответы

Ответ 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

Ответ 2

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

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

Ответ 3

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

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

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

Ответ 4

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

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

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

Ответ 5

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

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