The picture shows that the characters in the first and last lines do not quite fit into the elements (li) of the list (ul). But I would like everything to fit and center. Inline block does not help. In blue, I ticked the li tag, which contains the list.
http://dl4.joxi.net/drive/2016/12/30/0001/0403/94611/11/0b627d44fc.png

Markup (Jade):

ul li(data-text="GALLERY") GALLERY li(data-text="BLOG") BLOG li(data-text="ABOUT") ABOUT

But she doesn’t really say anything.

Padding for this purpose can not be changed, you need to do otherwise. Help me please. I don’t understand at all why the font in the tag can be cut off and not fit into it ...

Closed due to the fact that off-topic participants Vadim Ovchinnikov , AK ♦ , user194374, Alex , aleksandr barakin Jan 7 '17 at 22:51 .

It seems that this question does not correspond to the subject of the site. Those who voted to close it indicated the following reason:

  • “Questions asking for help with debugging (“ why does this code not work? ”) Should include the desired behavior, a specific problem or error, and a minimum code for playing it right in the question . Questions without an explicit description of the problem are useless for other visitors. See How to create minimal, self-sufficient and reproducible example . " - Vadim Ovchinnikov, AK, Community Spirit, Alex, aleksandr barakin
If the question can be reformulated according to the rules set out in the certificate , edit it .

  • And why inline-block did not fit? - Yuri
  • And for the reason that it simply does not work in any way. Above the markup is working with flex containers, and even inline-flex does not help. The point is specifically in such a font ... By the way, this is Sansita One with Google Fonts. - VostokSisters
  • overflow: visible also does not work. - VostokSisters
  • On the last line you can see that "A" is cut off too. That is, the line in li was centered, and the width remained equal ... I don’t even know what. The sum of the width of all characters of the font? - VostokSisters
  • one
    @VostokSisters I still do not understand why it was impossible to create a minimal, adequate and replicable example. Can you add a running example with a font that you have difficulty with? - Vadim Ovchinnikov

2 answers 2

Try adding the following styles to li :

 li:before, li:after { display: inline-block; content: ''; width: 8px; /* Тут надо самому свою внести */ height: 10px; /* Тут высоту свою указать */ }

In general, my advice: change the font, since my method is a crutch

  • I can not, because after is already used to create a gradient text. - VostokSisters
  • @VostokSisters, why? You can make the color a gradient without additional blocks - Yuri
  • @VostokSisters, shpargalkablog.ru/2013/11/gradient-text.html - Yuri
  • Gradient can, but will not work, using one element to make it gradient and with a shadow behind at the same time) without blue blocks You can use filter: drop-shadow (), but since the animation of the appearance of this menu is used, this is not an option, because even on Chrome has a little noticeable lags, and firefox disgustingly draws this shadow. - VostokSisters
  • impossible because text-shadow is drawn before the gradient. Alas. So stupidly done. - VostokSisters

I had to use all the same padding for this purpose. And in after register padding: 0 inherit. It works as it should, the text is fixed. Result: tyk

  • Can you add a code here? - Vadim Ovchinnikov
  • For not wanting to add code here, the usefulness of this answer is zero. Add a working code with an explanation why this is the solution chosen - remove the minus. - Vadim Ovchinnikov