CSS - фиксированная ширина элемента, установленная для определенного внутреннего содержимого?

Question

Можно ли исправить width (или min-width) элемента, равного тому, когда этот элемент заполнен определенным содержимым?

Пример: кнопка для выбора месяца может иметь текст января, февраля и т. Д. Я бы хотел, чтобы кнопка всегда была шириной, как если бы текст был сентябрь (визуально самая длинная строка) , Что происходит в настоящее время, так это то, что кнопка очень мала, если текущим выделением является май или июль, а затем намного больше, если выделением является ноябрь или сентябрь, и, кроме того, это может изменить расположение других элементов.

Конечно, я мог бы установить width или min-width, используя пиксели, или процент, или vw, и т. Д. - но учитывая широту устройств, экранов, пользовательский контроль над масштабированием или размерами шрифта, единственный безопасный способ состоит в том, чтобы угадать размер, который, вероятно, намного больше, чем фактически необходимо, что само по себе выглядит плохо и нежелательно.

Answer 1

Установка брата div с помощью visibility: hidden - это ключ, оба из которых находятся внутри другого контейнера div.

Кодовый код здесь: https://codepen.io/anon/pen/XQxeep

let strings = [
  'tiny', 'short', 'medium-length', 'this is a long string',
  'finally, an extremely long string'
];
let m = 0;

function nextString() {
  m = (m == 4) ? 0 : m + 1;
  document.getElementById('bt').innerHTML=strings[m]
}

button { 
  display: inline-block;
  position: relative; 
}
.showme { 
  position: absolute; 
  left: 0px; 
  right: 0px;
}
.hideme { 
  visibility: hidden; 
}

this is the button we are trying to keep a fixed size, the size of the longest element so it will not expand:
<button onclick="nextString()">
  <div class="outer">
    <div class="showme" id="bt">tiny</div>
    <div class="hideme">finally, an extremely long string</div>
  </div>
</button>