Comment mettre un texte en retrait exactement une largeur de caractère

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

  •  12-11-2019
  •  | 
  •  

Question

La condition préalable est que j'utilise monospace comme mon font-family, mais il ne semble pas fonctionner correctement, j'ai essayé une solution mais neight de leur travail, ma structure HTML est comme ci-dessous:

<!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. utilisation em

    em doit être égale à la calculé de la taille de police valeur, mais padding-left:Cadratin (1 em; ne fonctionne pas:

    em

  2. utilisation px

    padding-left:32px; fait la même sortie que padding-left:Cadratin (1 em;.

  3. utilisation ex

    ex devrait être le calculée à hauteur de la lettre "x", et il ne fonctionne pas non plus:

    ex

  4. utilisation ch

    OK, webkit ne pas soutien ch en css unité.

Alors, comment puis-je écrire le css exactement tiret du deuxième div une largeur de caractère, qui est, le premier " 0 "doit être aligné à gauche de la lettre "b", sans aucune déviation.

Était-ce utile?

La solution

Une manière possible, bien qu'un peu hacky, serait d'insérer un espace avant la ligne à l'aide de la :before pseudo sélecteur content:

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

Je n'ai aucune idée pour les navigateurs qui le soutiennent, mais je suppose que tous les navigateurs.

http://jsfiddle.net/cavqM/

Autres conseils

Basé sur le Tatu de l'approche, vous pouvez utiliser une représentation unicode de un aucun espace sécable comme &nbsp;

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

HTH,

--hennson

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top