#html #css #sass
#HTML #css #дерзость
Вопрос:
Я использую всплывающую подсказку, которая используется для отображения 2 текстов, которые :
- Скопировать значение в буфер обмена
- Скопировано
Ожидаемый результат показан ниже:
Я попробовал это, используя приведенный ниже css
.tooltip {
display: none;
align-items: center;
justify-content: center;
min-width: rem(80px);
padding: rem(8px) rem(16px);
border-radius: rem(4px);
background: var(--white);
color: var(--gray-900);
position: absolute;
bottom: calc(100% 10px);
left: 50%;
transform: translateX(-50%);
amp;::before {
content: '';
display: block;
width: 0;
height: 0;
border-left: rem(5px) solid transparent;
border-right: rem(5px) solid transparent;
border-top: rem(5px) solid var(--white);
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
}
}
и это то, что я получил вместо
Нужна помощь: установить минимальную ширину и максимальную ширину и разрешить контейнеру расширяться в пределах этого диапазона.
Комментарии:
1. Можете ли вы включить фрагмент, демонстрирующий проблему?
2. Кроме того, вы пробовали
white-space: nowrap?
Ответ №1:
В CSS:
min-width: max-content
или
white-space: nowrap
Комментарии:
1. Добро пожаловать в Stack Overflow. Ответы, содержащие только код, в Stack Overflow не приветствуются, поскольку они не объясняют, как это решает проблему. Пожалуйста, отредактируйте свой ответ, чтобы объяснить, что делает этот код и как он устраняет проблему, чтобы он был полезен OP, а также другим пользователям с аналогичными проблемами.