Как исправить обрезание буквы?

Question

[ilovemaryjane]

Не могу осилить никак проблему.

Есть слово, рабитое по буквам в span.
Проблема в том что span настолько вплотную к краю буквы, что края обрезаются у некоторых букв.

Как задать пространство?

Я попробовал дать padding spanу, это визуально работает, но ломает мой другой скрипт. Поэтому padding использовать не могу.

Попробовал задать letter-spacing, он работает, но в только с одной стороны, т.к. пространство добавляется только справа, т.е. буква не центрирована в span, и на text-align не реагирует.

Что делать?

Проблема:


letter-spacing:

Comments

[Виталий Першин]

Было бы не плохо увидеть пример в песочнице

Answer 1

[lazarev_s_a]

В в чем именно проблема использовать padding? При letter-spacing не выставишь по центру т.к. пространства свободного нет. Можешь дать дать span конкретную ширину, и уже потом отцентрируй текст.

Comments

[ilovemaryjane]

С паддингом ломается fit text скрипт, он не может рассчитать правильно размер

[lazarev_s_a]

Без кода сложно что то сказать, если с фикс. шириной тоже не вариант, можешь попробовать костыль - сделать span инлайн блочным и задать overflow: visible. Части буквы не будут срезаны краями span

[ilovemaryjane]

lazarev_s_a, спан и так инлайн блок. А вот overflow: visible увы не работает (странно)

[lazarev_s_a]

Сбрось код в песочницу.

Answer 2

[Just A Bit]

Попробуйте на span элемент добавить такое:

line-height: 1;
display: inline-block;

Результат с буквой W: https://codepen.io/anon/pen/QJQymX

Comments

[ilovemaryjane]

Это там и так стоит

[ilovemaryjane]

В примере на кодпен шрифт такой, что проблемы нету изначально

[Just A Bit]

ilovemaryjane, тогда изначально стоило бы указать какой вы используете шрифт, а ещё лучше дать пример на том же codepen.

Answer 3

[Евгений Нечепуренко]

Родительскому элементу:

display: flex;
justify-content: space-between;

Comments

[ilovemaryjane]

0 эффекта