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

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

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

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

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

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

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

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


html css cross-browser
person Wesley Murch    schedule 26.05.2011    source источник
comment
хммм, он работает на хроме, значит, ваша проблема для FF и IE?   -  person corroded    schedule 26.05.2011
comment
также ИМХО, такого длинного текста не должно быть в легенде. легенда должна быть кратким описанием того, что содержит набор полей. любой другой текст, поместите его в p внутри набора полей (или снаружи)   -  person corroded    schedule 26.05.2011
comment
Хм, хороший момент. Думаю, это может быть только Firefox! IE8, Safari, Chrome и Opera были в порядке. Пора обновить вопрос ... @corroded: Да, я полностью ожидал такого ответа, но это не относится к делу.   -  person Wesley Murch    schedule 26.05.2011
comment
@corroded Даже краткое описание может потребоваться обернуть при отображении fieldset на мобильном устройстве.   -  person AntonChanning    schedule 23.02.2016

Ответы (5)


arrow_upward
21
arrow_downward

Добавление 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

person Galeel    schedule 06.06.2011
comment
Ага, спасибо, что указали на это. Похоже, что использование <div> в легенде исправляет это для IE7 и IE6. Обновленная скрипка без дополнительного CSS - person Wesley Murch; 06.06.2011
comment
Увидел ваше обновление: Отличная работа! Похоже, нам нужен дополнительный элемент div / span для этих ужасных браузеров. Вряд ли мне это действительно понадобится в ближайшее время для IE ‹8 - но теперь я знаю, что мне нужно сделать, чтобы исправить это, когда оно появится. Спасибо еще раз! - person Wesley Murch; 06.06.2011
comment
Спасибо за отличное решение. IE10 тоже был проблемой. Уловка с пролетом была необходима, чтобы исправить обертку. - person Julesfrog; 05.09.2014

arrow_upward
8
arrow_downward

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

legend {
  white-space: normal;
  display: table; /* IE10 */
}
person TMMC    schedule 07.07.2013

arrow_upward
5
arrow_downward

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

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

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

person sandeep    schedule 26.05.2011
comment
Это прекрасно, не могу поверить, что это так просто! Спасибо за занимательную и полезную статью. Кажется, это относится к FF2 и FF3, поэтому любопытно увидеть, что проблема сохраняется на FF4. Я также могу гораздо больше контролировать легенду после установки этого свойства. Какой странный ярлык. - person Wesley Murch; 26.05.2011
comment
@ Уэсли; Будем рады помочь, если вы этого хотите, тогда примите ответ, который будет вам полезен. - person sandeep; 26.05.2011

arrow_upward
3
arrow_downward

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

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

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

person Phil.Wheeler    schedule 26.05.2011
comment
Да, это отлично работает - хотя я не видел никаких проблем с цветом фона набора полей в FF3 или FF4, о чем вы? - person Wesley Murch; 26.05.2011
comment
Мех - должно быть, это была причуда JSFiddle. Серый цвет не покрывает всю текстовую область легенды. - person Phil.Wheeler; 26.05.2011
comment
Вы имеете в виду наверху? Я думаю, что это в основном нормальное поведение легенды, вроде vertical-align:middle. Добавление float:left к легенде, казалось, решило эту проблему, но это немного странно. - person Wesley Murch; 26.05.2011

arrow_upward
2
arrow_downward

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

legend {
  display: table;
  max-width: 100%;
}
person G. Egli    schedule 24.01.2019