В зависимости от выбора пользователя содержимое страницы загружается из Firebase. Однако для того, чтобы сделать его немного более интересным, чем просто некоторый контент на странице, дизайн навигации состоит в том, чтобы следующие страницы были в кругах, которые расширяются, когда пользователь наводит курсор на них.
Наведение работает, и ссылка на следующую страницу работает, но текст в этой ссылке взят из Firebase, и некоторые из них содержат всего несколько символов, а другие намного длиннее. Поскольку это стоит, более длинный текст переполняет контейнер. Я хотел бы изменить размер текста, чтобы он соответствовал контейнеру, независимо от того, как долго это будет, любые предложения будут оценены.
CSS Я сейчас использую ниже.
.bubbleContainer {
display: flex;
float: center;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center
}
.bubble {
flex: 1;
height: 60px;
margin-left: 70px;
margin-right: 70px;
border-radius: 50%;
padding-top: 2%;
color: #FFFFFF;
align-content: center;
background: linear-gradient(0deg, #0088FF 0%, #B0D5D0 100%);
transition: .3s ease
}
.bubble:hover {
transform: scale(1.5);
}