CSS - fixed element width set to specific internal content?

Question

Is it possible to fix the width (or min-width) of an element equal to when that element is filled with specific content?

Example: a button for selecting the month can have text of January, February, etc. I would like the button to always be the width as if the text is September (the longest string, visually). What happens currently, is the button is very small if the current selection is May or July, then much larger when the selection is November or September, and further, this can change the layout of other elements.

Of course I could set width or min-width using pixels, or a percentage, or vw, etc -- but given the breadth of devices, screens, user control over zoom or font sizes, the only safe way is to guess at a size that is likely far larger than actually necessary, which itself looks bad and is undesirable.

probably a duplicate: https://stackoverflow.com/a/55328972/8620333 — Temani Afif, Apr 22 '19 at 08:53
a similar one too: https://stackoverflow.com/q/54440571/8620333 — Temani Afif, Apr 22 '19 at 08:54
@TemaniAfif The above two examples only work under very specific, limited circumstances, and as such, I don't think they qualify as duplicates. — ExactaBox, Apr 24 '19 at 08:04
I didn't close as duplicate, I shared question where the issue is similar. As a side note, the answer you added uses the same technique which confirms that the question are similar if not duplicate. — Temani Afif, Apr 24 '19 at 08:32
The answers to the linked questions rely on `::before` and `::after` pseudo-elements, not a sibling element, and not `visibility:hidden` They also handle exactly 2 possible states (and no more), not a variable array of any length. — ExactaBox, Apr 24 '19 at 20:08
with your comment you confirm that they are similiar :) .. visibility:hidden and opacity:0 are the same, pseudo element are elements so you will have the same result as adding an extra element instead (as a side note the first question also consider sibling element) and if you get the trick with 2 elements you can scale to n elements ;) ...and as I said, I didn't close as duplicate but they are similar question that can give the idea how to handle this. — Temani Afif, Apr 24 '19 at 20:17

score 0 · Answer 1 · answered Apr 24 '19 at 08:01

Setting a sibling div with visibility: hidden is the key, both of which reside inside another container div.

Codepen here: 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>

CSS - fixed element width set to specific internal content?

1 Answers1