First letter goes out of the paragraph box. How to fix that?

Question

You can see in the screenshot that the first letter goes out of the box. I tried font-kerning property but it doesn't fix that. What should I do to start the letter "T" from the beginning.

PS: Only display block property is assigned to this paragraph, nothing else, and I think this font is kind of like that. Plus, I don't want to do this through paddings or margins. There must be a CSS property for this. Thanks

<div class="custom-font">
  <p>We are one big family implanted in the whole world.</p>
  <p>Winning, progress and teamwork are our priority.</p>
  <p>That’s why we design products exclusively for an elite</p>
</div>

JSFIDDLE: https://jsfiddle.net/2jstmkp4/

I don't think you can control that, because it's a font thing but i'm not sure, however please include your code, so people can help you. — Rainbow, Oct 24 '18 at 13:18
this is for sure font specific .. like Zalgo is doing : https://stackoverflow.com/questions/6579844/how-does-zalgo-text-work — Temani Afif, Oct 24 '18 at 13:26

score -1 · Answer 1 · answered Oct 24 '18 at 13:20

-1

I think the easiest way to do it is through padding, but since you don't want to use it I don't know what other easy solution there is.

What is the reason you don't want to use padding/margin?

answered Oct 24 '18 at 13:20

Rob Rombouts

88
9

Because that is not a generic way to do this. – Umer Javed Oct 24 '18 at 13:25
1

The problem is that your font goes out of its boundaries, it is wider than the reserved space on your screen. The part that falls of your block is outside the space for the char. So no css property will detect this. – Rob Rombouts Oct 24 '18 at 13:34

score -1 · Answer 2 · answered Oct 24 '18 at 13:21

-1

Try add this css code for paragraph:

p {
 overflow-wrap: break-word;
}

answered Oct 24 '18 at 13:21

WebCoder

62
10

1

:( Then you have to use padding or margin – WebCoder Oct 24 '18 at 13:26

First letter goes out of the paragraph box. How to fix that?

2 Answers2