Come rientrare a testare esattamente una larghezza del carattere

StackOverflow https://stackoverflow.com/questions/9428528

  •  12-11-2019
  •  | 
  •  

Domanda

Il presupposto è che uso monospaziale come il mio famiglia di font, ma non sembra funzionare correttamente, ho provato un po 'di soluzione, ma neight di loro funziona, la mia struttura HTML è di seguito:

<!DOCTYPE html>
<style>
  body {
    font-family: monospace;
    letter-spacing: 0;
    word-spacing: 0;
    font-size: 32px; /* large enough to see the effect */
  }
  div:last-of-type {
    padding-left: 1em; /* what's the value? */
  }
</style>
<div>123456</div>
<div>abcdef</div>

  1. uso Em

    Em dovrebbe essere uguale al Size di carattere calcolato valore, ma imbottitura-sinistra: 1em; non funziona:

    em

  2. uso Px

    imbottitura-sinistra: 32px; fa lo stesso output di imbottitura-sinistra: 1em;.

  3. uso ex

    ex dovrebbe essere il Altezza calcolata della lettera 'X', e non funziona neanche:

    ex

  4. uso cap

    Ok, webkit no sostegno cap come unità CSS.

Quindi come posso scrivere il CSS per rientrare esattamente il secondo div una larghezza del personaggio, cioè il primo "0" dovrebbe essere allineato alla lettera "B", senza alcuna deviazione.

È stato utile?

Soluzione

Un modo possibile, anche se un po 'hacky, sarebbe quello di inserire uno spazio prima della riga usando il :before Pseudo selettore con content:

div:last-of-type:before {
    content: " ";
    white-space: pre;
}

Non ho idea di quali browser lo supportano, ma presumo che tutti i browser moderni lo farebbero.

http://jsfiddle.net/cavqm/

Altri suggerimenti

Sulla base dell'approccio di Tatu è possibile utilizzare una rappresentazione Unicode di uno spazio non fragile come &nbsp;

div:last-of-type:before {
   content: "\00a0"; /* this is &nbsp; */
}

Hth,

-Hennson

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top