Как растянуть цифры по ширине div?

Question

[v-orlov]

казалось бы, простая задача, но меня загнала в ступор.
есть три инлайн-блока с цифрами (таймер), блоки имеют фиксированную ширину, скажем 30px. я пытаюсь растянуть цифры по ширине блока, но безуспешно.

<div class="hours">12</div>
<div class="minutes">56</div>
<div class="seconds">01</div>

нагуглил один вариант, но он растягвает только после пробела, если пробела нет, то ничего не тянется.
пример с текстом
в моем случае нет возможности поставить этот пробел между цифрами или разделить, например, часы по отдельным двум блокам. или можно как-то с помощью js/jquery?
подскажите, как пропорционально растянуть цифры по блоку?

Comments

[v-orlov]

есть мысль может в счетчике каким-то образом отлавливать саму цифру "1" и задавать только ей паддинг слева, чтобы ее пропорции поправить. если есть идеи как это можно сделать на jquery, буду премного благодарен

Answer 1

[v-orlov]

пока с letter-spacing у меня самый рабочий вариант, но не совсем подходит, тк шрифт таймера немного кривой, и цифра "1" имеет самую маленькую ширину, и из-за нее заметно съезжает вторая цифра.
то есть "18" и "08" имеют заметно разную ширину, и в первом случае восьмерка влево прыгает. если бы "8" была прижата к правому краю, это бы не так бросалось в глаза.

Comments

[Lynn «Кофеман»]

text-align: right не помогает?

[v-orlov]

та же беда, если "1" попадается второй ("51" и пятерка уезжает)

[v-orlov]

Алексей Тен: Rithmsamba: знаете, в принципе неплохо получилось. единица все равно неочень хорошо смотрится, но, по крайней мере, возле нее символы не прыгают. спасибо

[Lynn «Кофеман»]

v-orlov: Ну так это надо пинать ответственного за выбор такого шрифта, который не подходит для часов…

[v-orlov]

к сожалению, не могу отметить комментарии как решение. тыкну решение в свой выше ответ. но вы мне очень помогли. благодарю

[Rithmsamba]

v-orlov: Вынесла комментарий как ответ, можете поставить галку :)

Answer 2

[Дмитрий Новиков]

используйте css-свойство letter-spacing - с помощью него можно задать расстоянием между символами не используя пробелы.

Answer 3

[Алексей Николаев]

Разбейте цифры по отдельным блокам (каждый в отдельный span), и выровняйте их по ширине с text-align: justify

Comments

[v-orlov]

я не особо представляю как это можно сделать
пользуюсь скриптом:
https://github.com/tomgrohl/jQuery-plugins/tree/ma...

обратите внимание на сам шаблон:
htmlTemplate: "%y years %m months %d days %h hours %i mins %s sec",

и вот как здесь разбить параметр %h на подблоки?)

Answer 4

[Rithmsamba]

Попробуйте взять первый символ через :first-letter и задайте ему float:left
ну и дальше подровнять паддингами или line-height
Естественно, text-align: right