Мобильная версияПроблема У меня такое: когда текст в легенде переносится, легенда не регулирует свою ширину в соответствии с содержимым. Похоже, это вызвано тем, что легенды всегда имеют ширину:max-width, могут быть установлены на ширину:min-content, но по какой-то причине не могут быть шириной:fit-content >.
Это может быть вызвано тем, что легенды принудительно отображаются в виде display:block (display:flex ничего не делает с легендами, см. здесь). Есть ли другие способы сделать это?
Есть ли какие-либо решения этой проблемы с помощью только CSS? Я не хочу запускать JavaScript и менять макет страницы каждый раз, когда пользователь открывает страницу, и кажется, что это можно решить только с помощью CSS.
Пример:< /p>
Код: Выделить всё
legend {
border:1px solid black;
}
enter code here
.flex {
display: flex;
flex-shrink: 1;
}
.width {
width: fit-content;
}
.inline {
display: inline;
}
.span {
display: flex;
}
.whitespace {
white-space: normal;
}
.intended {
span {
border-right:red;
}
}Код: Выделить всё
Here is a really long long long legend with alongwordattheendforeffect
flex-shrink:1 really long long long legend with alongwordattheendforeffect
width:fit-content really long long long legend with alongwordattheendforeffect
display:inline really long long long legend with alongwordattheendforeffect
with a span really long long long legend with alongwordattheendforeffect
whitespace:normal really long long long legend with alongwordattheendforeffect
red border really long long long legend with alongwordattheendforeffect
Я пробовал использовать white-space:normal, display:inline, вложенные элементы div /spans и несколько других вариантов, которые я нашел в Интернете, и ни один из них, похоже, не решил мою проблему. Я думал, что width:fit-content сработает, однако тестирование опровергло эту теорию.
В отличие от обычных элементов div, любое решение (не-javascript) здесь НЕ работает с легендами (по ранее упомянутым причинам). ).
Подробнее здесь: https://stackoverflow.com/questions/792 ... egend-size
