Я предполагаю, что эти два атрибута фактически не работают вместе, но моя ситуация:
Я пытаюсь создать компонент всплывающей подсказки. Моя подсказка позиционируется абсолютно, и, поскольку я не знаю, какая длина содержимого будет, не имеет ширины. Таким образом, с помощью CSS, связанного с шириной, текст просто образует высокий, тощий столбец. Я пробовал max-width
, но сам по себе ничего не делает. Поэтому я решил попробовать white-space: nowrap
, и, хотя он красиво не обертывает текст, он также, по-видимому, не оценивает max-width полезным способом, а текст выходит из границ элемента.
Я не могу придумать, как решить мою проблему, если есть чистое решение. Я хотел бы иметь абсолютно позиционированный div, который расширяется, чтобы соответствовать его содержимому до максимума, после чего он обертывается. Одно из предложений, которое я видел, делало элемент a flexbox, но из того, что я могу сказать, это не очень хорошо с IE, поэтому я не думаю, что он жизнеспособен в моей ситуации. Любые советы?
.wrapper {
position: relative;
display: inline;
}
.info {
position: absolute;
bottom: 1.2em;
left: 0;
}
<div class="wrapper">
<span>[ ? ]</span>
<div class="info">Any long text can go in here to test what goes wrong with wrapping.</div>
</div>