Как выровнять значки SVG в тексте без использования флексбокса, сохраняя при этом усечение? ⇐ CSS

[Anonymous]

Код: Выделить всё

.box {
width: 230px;
border: 1px solid black;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

svg {
/* The size of the icon can vary */
width: 24px;
height: 24px;
}

Код: Выделить всё

This is text




and it should truncate

В этом примере у нас есть текст с SVG. Я задал SVG высоту и ширину 24 пикселя, но этот размер может измениться.
Есть ли способ последовательно центрировать SVG независимо от размера SVG, не нарушая при этом усечения? (Добавление отображения: flex нарушает усечение многоточия).
Я также пробовал стратегию, указанную здесь в этом сообщении блога, но для этого требуется, чтобы SVG имел высоту/ширину 1em, если я увеличиваю такого размера, я не знаю, как динамически вычислить максимальное значение.

Подробнее здесь: https://stackoverflow.com/questions/789 ... -truncatio