Как сделать так, чтобы <span>всегда имела одинаковую ширину, независимо от того, что внутри?

Question

Хорошо, я динамически сгенерировал html, где я назначил 1-6 масштабированных svgs как потомков a. промежуток встроен вместе с двумя другими промежутками, чтобы выглядеть следующим образом:

Я хочу, чтобы все эти "ящики" были одинаковой ширины, поскольку они существуют однако в сетке из-за разного количества svgs (иногда их нет, иногда 6) размеры отличаются.

То, что я пытался сделать, это определить родительскую ширину svg как 100px независимо, но это не не работает Что у меня есть:

var html = '<div id = "innerCal">';
html += '<div class = "calCell"><span>[</span><span style = "width 100px; display: inline-block">';
        html += svg; //varies
        html += '</span><span>]</span><h2>'+key+'</h2></div>';


#innerCal {
        position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
            overflow-y: scroll;
            text-align: center;
    }
.calCell {
    display: inline-block;
    width: 100px;
margin-bottom: -40px;
}

.calCell > span > svg {
display: inline-block;
transform: translate(0px, 30px);
}

.calCell > h2 {
    text-transform: uppercase;
    opacity: 0;
    font-weight: 400;
}

В svgs, которые я установил, можно установить ширину здесь:

svg += `<svg width = "20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 443"><defs><filter x="-50%" y="-50%" width="200%" height="200%" id="Blur${i}"><feGaussianBlur stdDeviation="${gauss}" /></filter><g id="Img${i}"><path class="cls-1" d="M202.76,281.72a67.53,67.53,0,0,0,68.67-42.57,66.32,66.32,0,0,0-21.66-76.4,60.38,60.38,0,0,0-75.51,1.82c-11.79,9.87-17.32,23.53-20.44,38.24-1.69,7.94-3.74,16.27-2.77,24.42a30,30,0,0,0,10.2,18.91c12.69,11.33,32.11,19.47,49.24,18.39,15.38-1,29.86-9.82,35.21-24.65,2.17-6-7.43-8.62-9.58-2.64-3.75,10.42-15,16.68-25.63,17.35-13.55.86-27.15-4.91-38.19-12.38-5.07-3.43-9.73-8-11.11-14.15-1.48-6.69.4-13.84,1.74-20.39,2.6-12.63,6.14-24.55,15.69-33.69a50.21,50.21,0,0,1,61.73-5.74c20.3,12.94,29.65,37.62,23.84,60.86-6.89,27.54-33.4,45.3-61.43,42.68-6.36-.59-6.32,9.35,0,9.94Z"/></g></defs><use style="fill:${color};" filter="url(#Blur${i})" xlink:href="#Img${i}"transform="translate(0,0)"/><use style="fill:${fillColor};" xlink:href="#Img${i}"/></svg>`; 

Как бы я это сделал, чтобы ящики всегда были одинаковой ширины? Конечно, я могу динамически изменять ширину svgs. Теперь svgs стекируются, несмотря на отображение: inline-block

Answer 1

Попробуйте это:

#yourSpanElement {
    display: inline-block;
    overflow: hidden;
    width: 50px;
}