Как сделать отступ для текста ровно на одну ширину символа - PullRequest
Новая
       31

Как сделать отступ для текста ровно на одну ширину символа

8 голосов
/ 24 февраля 2012

Предварительным условием является то, что я использую monospace в качестве моего семейства шрифтов , но, похоже, он не работает должным образом, я пробовал какое-то решение, но некоторые из них работаютмоя структура HTML выглядит следующим образом: 

<!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. использование em

    em должно быть равно вычисленный размер шрифта значение, но отступ слева: 1em; не работает:

    em

  2. использование px

    отступ слева: 32px; выводит то же, что и отступ слева: 1em; .

  3. использовать ex

    ex должно быть вычисленной высотой буквы 'x' , и это не работаетлибо:

    ex

  4. использование ch

    OK, webkit не поддержка ch как единица измерения css.

Итак, как мне написать css для точного отступа второго div ширина одного символа , то естьпервый «0» должно быть выровнено по левому краю к букве «b» без каких-либо отклонений.

Ответы [ 2 ]

8 голосов
/ 24 февраля 2012

Один из возможных способов, хотя и немного странный, - вставить пробел перед строкой, используя псевдо-селектор :before с content: 

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

. Я не знаю, какие браузерыподдерживаю это, но я предполагаю, что все современные браузеры будут.

http://jsfiddle.net/cavqM/

3 голосов
/ 24 февраля 2012

Основываясь на подходе Tatu, вы можете использовать Unicode-представление неразрывного пробела, например &nbsp;

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

НТН,

- hennson

...