Why is the ellipsis floating at center of the string? - css

Question

I ran into this problem while trying to truncate my text with an ellipsis. I'm using Tailwind CSS classes to achieve this.
Description:
The string should be truncated like John D... if it's too long, the ellipsis should be aligned at the bottom of the string.
But instead, the ellipsis is floating in the middle of the string like this:
I'm using 'Noto Sans JP', sans-serif font here. I tried changing to another default fonts but it's still behave in the same way.
Here's the code I use to truncate the text:
.truncate {
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
JSX:
<div className="rounded-t opacity-80 z-10 flex items-center absolute max-w-[17ch] text-black bg-white py-px px-2 bottom-0 right-4 transform-3d">
<Icon />
<p className='truncate mb-0'>{attendeeName}</p>
</div>

Answer 1

The ... may be occurring due to some other dependency/class like if you have item-center class somewhere in the div wrapping this text.
Assuming this is the code and had no dependency
Otherwise, you don't need to add any additional CSS and !important. Just add truncate text-elipsis class to the text.
Below is the implementation where I had shown the text-elipsis functionality
<script src="https://cdn.tailwindcss.com"></script>
<div class="p-5 space-y-4">
<div class="max-w-[5rem] bg-slate-200">
<Icon />
<p class='truncate text-ellipsis mb-0'>attendeeName</p>
</div>
<div class="max-w-[8rem] bg-slate-200">
<Icon />
<p class='truncate text-ellipsis mb-0'>attendeeName</p>
</div>
</div>
You can see if you use it normally then the ... appears at the bottom. So try to check the complete code again.
Edit after discussion with presenter
I had added the flex class in a span and removed some unnecessary classes.
<script src="https://cdn.tailwindcss.com"></script>
<div class="transform-3d bottom-0 right-4 z-10 max-w-[17ch] rounded-t bg-red-300 py-px px-2 text-black opacity-80">
<span class="flex flex-row space-x-2">
<img src="http://commondatastorage.googleapis.com/codeskulptor-assets/week5-triangle.png" class="h-6 w-6" />
<p class="mb-0 truncate text-ellipsis">attendeeName is very short</p>
</span>
</div>