2

I recently noticed the corners of my italic text (less than 0.1em of it) being cut off. Upon inspection, the slant created by "font-style: italic" had protruded past the width of the text, cutting it off. I tried using the fix here:

html italic letters protrude from their container (and may be cut by the next container' background)

But setting the padding-right only added a buffer around the width of the text. The edges were still being cut off by the auto width of the text itself (I can't fix it to a certain value since it changes).

Is there a way I can add a "padding" to the width itself to resolve this? Ex. It would take the width of the text and extend it by a certain amount, like 0.1 em. If that isn't possible, is there another way to create italic text without protruding past the auto width ever so slightly?

user7548189
  • 996
  • 6
  • 15
  • 30
  • 1
    Please provide a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). Please look at guide [how do I ask a good question?](https://stackoverflow.com/help/how-to-ask) – Andrzej Ziółek Aug 01 '18 at 18:36
  • 1
    Yes, I did provide such an example: if you inspect the italic text in the post, you can see the exact problem I'm talking about – user7548189 Aug 01 '18 at 18:38
  • 2
    `padding-right` seems like it would work. Can you post an example where it does not? – Rick Hitchcock Aug 01 '18 at 19:06
  • Padding-right extends the border of the text, not the width itself. My issue is that the text is being cut off by the auto width, not the border. You can see this by inspecting the padding-right fix. – user7548189 Aug 02 '18 at 01:01

2 Answers2

2

This is quite hacky, but assuming your lines of text are only single lines, you might be able to get away with doing something like this:

em::after {
  content: '';
  padding: 1px;
}

Adding an empty content string will make the phantom padding appear. This should give you that little bit of room needed. I believe this won't work for wrapping lines though.

Quick edit, this might be better actually.

flvps
  • 179
  • 1
  • 9
Josh V
  • 111
  • 1
  • 3
2

A little bit late, but maybe it will help others. To see cut off font in text container, you could use overflow visible, like on example here:

.text-container {
   overflow: visible;
}

It won't be cut anymore and should work just fine if you don't need to reproduce the same text in backend.

Example:

.text {
display: inline-block;
font-size: 250px;
font-family: 'Great Vibes', cursive;
overflow: hidden;
}

.text-container {
overflow: visible;
}
<html>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap" rel="stylesheet">
</head>
<body>
<div class="text">
eee
</div>
<br />
<div class="text text-container">
eee
</div>
</body>
</html>
Grzegorz Pietrzak
  • 153
  • 12
  • 1
    Please don't write answers in a way that makes them look like questions. There are systems in place to check for Not An Answer (NAA) posts. This answer was falsely picked up by one of them. Please consider editing it to look more like an answer. Rephrase the "Directly to text container?" part. – Sabito stands with Ukraine Dec 08 '20 at 15:58
  • 1
    After the edit it's actually a nice answer, just upvoted it :) – Zsolt Meszaros Dec 08 '20 at 17:14