I encountered this situation where it seems the width of the text container goes full size if a word-break rule is applied.
<ul class="flex flex-col-reverse space-y-1 space-y-reverse transition-all">
<li class="flex w-full items-end justify-between space-x-2">
<div
class="mb-0.5 flex size-7 shrink-0 items-center justify-center rounded-full bg-blue-500"
>
<img
class="rounded-full"
src="https://randomuser.me/api/portraits/thumb/men/1.jpg"
/>
</div>
<div class="w-full">
<span class="ml-1.5 text-2xs font-semibold">
<span class="ml-1 inline-block text-3xs font-normal">2023-10-16</span>
</span>
<div id="here" class="w-fit max-w-56 rounded-lg bg-[#161616] px-2 py-1.5 shadow-md">
<p class="break-words text-xs font-medium">Who’s up for a movie night this weekend?</p>
</div>
</div>
</li>
...
</ul>
I’ve tried playing with more options for width, max-width, and min-width over the id="here"
but I’m running in a loop, is there any way to fit the final length of the container to the exact amount of space the text takes?
You need to sign in to view this answers
Leave feedback about this