Принудительно протянуть внутреннюю кнопку, чтобы пройти через две строки ⇐ CSS

[Гость]

Я пытаюсь отобразить 100 кнопок с сеткой: по 3 кнопки в каждой строке. Для этого у меня есть такой код:

отображение: сетка; ширина: 100%; Grid-template-columns: повторение (автозаполнение, minmax (400 пикселей, 1fr)); Каждая кнопка имеет внутри значок и диапазон. Проблема в том, что внутри диапазона текст может быть очень длинным, то есть длиннее, чем эти 400 пикселей для каждого элемента. Это создает проблему, поскольку текст на следующей кнопке выходит за пределы. Текст представляет собой одно большое слово типа: тест-тест-тест-тест-тест, но без пробелов между словами, только «-». Я думал заставить диапазон занимать две строки, чтобы он имел достаточную ширину, чтобы не переполняться при следующей кнопке. Как мне это сделать? Или какое другое решение? Я также думал о text-overflow:ellipsis, но это означало бы, что при наведении курсора будет отображаться все слово, но текст все равно будет переполняться на следующем элементе. Заранее спасибо!