Как схлопывать элемент если он не помещается?

Question

[Артем]

<parent>
  <title />
  <button />
</parant>

Элемент button это кнопка с иконкой и текстом

Как скрывать текст, если title вытесняет button, оставляя только иконку

Пробовал играться с width, но так можно добиться только уменьшения ширины кнопки, тем самым обрезая текст, а нужно его полностью удалять

Comments

[Максим]

Если не хотите js пихать, то сделайте две кнопки с разным текстом/иконкой и отображайте нужную в зависимости от ширины

[Артем]

Максим Черябушкин, в том и дело, что без js неизвестна ширина title

[Максим]

document.querySelector("your_button_id").textContent = 'новый текст/иконка'

[Арсений Матыцин]

Вилами по воде мазано. Бери codepen.io и реализуй то, что у тебя есть, вместо этого театра абсурда. Тогда и советы подъедут.

Answer 1

[Артем]

Добился примерно нужного эффекта добавив
button {
white-space: pre-line;
}

button:before {
content: '';
display: inline-block;
}

В таком случае, если текст не вмещается в button, он переезжает на следующую строку, которая overflow: hidden
Вроде и работает, но не так как хотелось бы
Больше выглядит на костыль