All geek questions in one place

5rem can contain 10 characters?

I played with monofonts (because each character is as wide as the next one) to fit the length of the input field. My question is: what happened 5rem is equal to 10 characters?in the input field in both chrome and firefox? You would expect 10 characters to be wide 10rem:

input[type="text"] {
  border: 0;
  outline: 0;
  background: transparent;
  border-bottom: 2px solid black;
  font-family: 'monospace';
  overflow: hidden;
  width: 5rem;
}
<body id="body">
  <form onSubmit="return false">
    <input type="text" placeholder="your name" maxlength="10" required />
    <input type="submit" />
  </form>
</body>
Run codeHide result

http://codepen.io/alfredwesterveld/pen/RrypPv

+4
source share
2 answers

The device you are looking for ch: this block represents the width of the character "0" in the current font. In a monospace font, it is 1chequivalent to the entire width of the characters.

input {
  border: 0;
  outline: 0;
  background: transparent;
  border-bottom: 2px solid black;
  font-family: monospace;
  width: 9ch;
}
<input type="text" placeholder="your name" maxlength="10" required />
Run codeHide result

, monopsace , . 1ch ≈ 0.5em 5em ≈ 10ch.

+5

Source: https://habr.com/ru/post/1626278/

More articles:


All Articles