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>