CODEWITHSUNDEEP
htmlcss
user7548189
user7548189

Reputation: 1016

"font-style: italic" makes text protrude from container, cutting off text

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?

Upvotes: 2

Views: 3041

Answers (2)

Josh V
Josh V

Reputation: 121

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.

Upvotes: 3

Grzegorz Pietrzak
Grzegorz Pietrzak

Reputation: 175

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>

Upvotes: 1

Related Questions