webkit-line-clamp with text-align: justify;

41 Views Asked by At

I have an issue when using line-clamp on text that have the CSS prop text-align: justify; as you can see here: Safari (mobile & desktop) and Chrome mobile

The 3 dots at the end of my text are overlapping the text. This happens on Safari (mobile & desktop) but not on Chrome desktop where it's working as expected: Chrome desktop

However, it's also happens on Chrome mobile.

I don't really know why this happens, the only way I found to fix it is to use text-align: left instead of text-align: justify but this changes the display and I would like to keep text-align: justify.

Code:

<div className="pt-6 text-justify text-sm line-clamp-9">
    <p>...</p>
</div>
0

There are 0 best solutions below