Member Avatar for unlimited071

Hi all, I'm new here at daniweb.com and I have this question that want to share with you.
Lately I've been trying to set the width of an input so it shows an expecific number of chars according to it's font size. I mean: <input id="myInput" type="text" value="12345678901234567890" /> as you can see, this is an input with 20 characters in it. What I want to do is to set it's width to match exactly 20 chars. I was wondering if there is some way of doing this width css, maybe something like this:

<style type="text/css">
    #myInput{
        width:20ex; /*it's my understanding that the ex unit should be the x-height for a font*/
    }
</style>

Thanks.

PS:sorry for my english.

  • 4 Contributors
  • 4 Replies
  • 396 Views
  • 2 Years Discussion Span
  • Latest Post Latest Post by abdesigns2011

Dani AI

Generated

A compact, practical summary that ties the existing replies together.

The simplest HTML approach is the input element’s size attribute — it tells the browser how many characters should be visible (the default is 20) and is the closest built‑in way to express “show N characters”. CSS rules will still override it if you set a width there. (developer.mozilla.org)

For a CSS solution the modern unit to use is ch (it’s defined as the advance width of the "0" glyph). The ex unit measures the font’s x‑height and em is relative to the element’s font‑size, so em isn’t a good one‑to‑one match for character width. ch gives the closest character-based width, but its rendering can vary by font (proportional vs monospaced) and across some older browsers. If you need predictable results, pick a monospace font or test on target browsers. (developer.mozilla.org)

When absolute precision is required (exact pixels for N characters in the chosen font), measure text width and set the input width in pixels at runtime. Example: create a hidden span, copy the input’s font/letter‑spacing, place N repeated characters into the span, read its bounding width, then apply that value to the input. This accounts for the actual glyph metrics and font rendering. Remember to handle padding/border or use box‑sizing so the math matches what you see. (developer.mozilla.org)

Quick checklist: use the size attribute for a quick, semantic character count; use ch for a pure‑CSS, font‑relative approach; use JavaScript measurement when you need pixel‑perfect results or must support fonts whose numerals are proportional. Check browser support for ch if you must target very old or niche browsers. (caniuse.com)

Code (JS measurement pattern):

function setWidthForChars(input, count) {
  const s = document.createElement('span');
  const st = getComputedStyle(input);
  s.style.visibility = 'hidden';
  s.style.whiteSpace = 'pre';
  s.style.font = st.font;
  s.textContent = '0'.repeat(count);
  document.body.appendChild(s);
  const w = Math.ceil(s.getBoundingClientRect().width);
  const pad = parseFloat(st.paddingLeft) + parseFloat(st.paddingRight) +
              parseFloat(st.borderLeftWidth) + parseFloat(st.borderRightWidth);
  input.style.width = (st.boxSizing === 'border-box' ? (w + pad) : w) + 'px';
  s.remove();
}

Recommended Answers

All 4 Replies

Member Avatar for MidiMagic

Make a style, and set the width to 20em (or 21 for some room) in the style.

Member Avatar for unlimited071

:
Thanks almostbob but I was wondering how to do this on CSS so I dont have to set the lenght for every input on my site like that.


Sorry MidiMagic but that would make the input 20 times the size of the line-height wich is much larger than the width of a char.

taking advantage of almostbob post, i think i could remake my question like this..
wich CSS property (or combination of CSS properties) is equivalent to the following.

<input width="20" />

Member Avatar for abdesigns2011

You can use the "ch" CSS length unit, which is the width of the font's 0 character. Not sure on overall browser support. width: 20ch;

Edited by abdesigns2011 because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.