Html - Why isn't the following text being collapsed into a ellipsis?

wyc
July 16, 2024
135 views
2 votes
4 Answers

This is the code:

<div class="grid w-full gap-4 grid-cols-8">
  <div class="flex w-full flex-col gap-1 justify-center items-center max-w-small cursor-not-allowed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="tabler-icon tabler-icon-file-filled h-10 w-10">
      <path d="M12 2l.117 .007a1 1 0 0 1 .876 .876l.007 .117v4l.005 .15a2 2 0 0 0 1.838 1.844l.157 .006h4l.117 .007a1 1 0 0 1 .876 .876l.007 .117v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-10a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-14a3 3 0 0 1 2.824 -2.995l.176 -.005h5z"></path>
      <path d="M19 7h-4l-.001 -4.001z"></path>
    </svg><span class="overflow-hidden text-ellipsis text-center text-xs">sssssssssssssss</span></div>
  <div class="flex w-full flex-col gap-1 justify-center items-center max-w-small cursor-not-allowed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="tabler-icon tabler-icon-file-filled h-10 w-10">
      <path d="M12 2l.117 .007a1 1 0 0 1 .876 .876l.007 .117v4l.005 .15a2 2 0 0 0 1.838 1.844l.157 .006h4l.117 .007a1 1 0 0 1 .876 .876l.007 .117v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-10a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-14a3 3 0 0 1 2.824 -2.995l.176 -.005h5z"></path>
      <path d="M19 7h-4l-.001 -4.001z"></path>
    </svg><span class="overflow-hidden text-ellipsis text-center text-xs">dummy.mib</span></div>
</div>

The text breaks out of the container instead of being collapsed. Why is that, and how to fix it?

Tailwind Play

Answers

try this code

<div class="grid w-full gap-4 grid-cols-8">
  <div class="flex w-full flex-col gap-1 justify-center items-center max-w-small cursor-not-allowed" style="width: 100px;">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="tabler-icon tabler-icon-file-filled h-10 w-10">
      <path d="M12 2l.117 .007a1 1 0 0 1 .876 .876l.007 .117v4l.005 .15a2 2 0 0 0 1.838 1.844l.157 .006h4l.117 .007a1 1 0 0 1 .876 .876l.007 .117v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-10a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-14a3 3 0 0 1 2.824 -2.995l.176 -.005h5z"></path>
      <path d="M19 7h-4l-.001 -4.001z"></path>
    </svg>
    <span class="overflow-hidden text-ellipsis text-center text-xs" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;">sssssssssssssss</span>
  </div>
  <div class="flex w-full flex-col gap-1 justify-center items-center max-w-small cursor-not-allowed" style="width: 100px;">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="tabler-icon tabler-icon-file-filled h-10 w-10">
      <path d="M12 2l.117 .007a1 1 0 0 1 .876 .876l.007 .117v4l.005 .15a2 2 0 0 0 1.838 1.844l.157 .006h4l.117 .007a1 1 0 0 1 .876 .876l.007 .117v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-10a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-14a3 3 0 0 1 2.824 -2.995l.176 -.005h5z"></path>
      <path d="M19 7h-4l-.001 -4.001z"></path>
    </svg>
    <span class="overflow-hidden text-ellipsis text-center text-xs" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;">dummy.mib</span>
  </div>
</div>

Add the white-space, overflow, and text-overflow properties to the span. it will ensure that the text will be truncated (with an ellipsis) if it overflows its container.

<div class="grid w-full gap-4 grid-cols-8">
  <div class="flex w-full flex-col gap-1 justify-center items-center max-w-small cursor-not-allowed">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="tabler-icon tabler-icon-file-filled h-10 w-10">
      <path d="M12 2l.117 .007a1 1 0 0 1 .876 .876l.007 .117v4l.005 .15a2 2 0 0 0 1.838 1.844l.157 .006h4l.117 .007a1 1 0 0 1 .876 .876l.007 .117v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-10a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-14a3 3 0 0 1 2.824 -2.995l.176 -.005h5z"></path>
      <path d="M19 7h-4l-.001 -4.001z"></path>
    </svg>
    <span class="overflow-hidden text-ellipsis whitespace-nowrap text-center text-xs">sssssssssssssss</span>
  </div>
  <div class="flex w-full flex-col gap-1 justify-center items-center max-w-small cursor-not-allowed">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="tabler-icon tabler-icon-file-filled h-10 w-10">
      <path d="M12 2l.117 .007a1 1 0 0 1 .876 .876l.007 .117v4l.005 .15a2 2 0 0 0 1.838 1.844l.157 .006h4l.117 .007a1 1 0 0 1 .876 .876l.007 .117v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-10a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-14a3 3 0 0 1 2.824 -2.995l.176 -.005h5z"></path>
      <path d="M19 7h-4l-.001 -4.001z"></path>
    </svg>
    <span class="overflow-hidden text-ellipsis whitespace-nowrap text-center text-xs">dummy.mib</span>
  </div>
</div>

The text breaks out of the container

This is because sssssss... is a continuous word and does not force a line break by default. In Tailwind you can use break-all to make text break at any position.

And it seems you intend to implement text overflow ellipsis. In Tailwind you can just use line-clamp-* to achieve this effect directly.

<div class="grid w-full grid-cols-8 gap-4">
  <div class="max-w-small flex w-full cursor-not-allowed flex-col items-center justify-center gap-1">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="tabler-icon tabler-icon-file-filled h-10 w-10">
      <path d="M12 2l.117 .007a1 1 0 0 1 .876 .876l.007 .117v4l.005 .15a2 2 0 0 0 1.838 1.844l.157 .006h4l.117 .007a1 1 0 0 1 .876 .876l.007 .117v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-10a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-14a3 3 0 0 1 2.824 -2.995l.176 -.005h5z"></path>
      <path d="M19 7h-4l-.001 -4.001z"></path></svg
    ><span class="line-clamp-2 break-all text-center text-xs">ssssssssssssssssssssssssssssssssssssssssssssssssssssss</span>
  </div>
  <div class="max-w-small flex w-full cursor-not-allowed flex-col items-center justify-center gap-1">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="tabler-icon tabler-icon-file-filled h-10 w-10">
      <path d="M12 2l.117 .007a1 1 0 0 1 .876 .876l.007 .117v4l.005 .15a2 2 0 0 0 1.838 1.844l.157 .006h4l.117 .007a1 1 0 0 1 .876 .876l.007 .117v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-10a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-14a3 3 0 0 1 2.824 -2.995l.176 -.005h5z"></path>
      <path d="M19 7h-4l-.001 -4.001z"></path></svg
    ><span class="line-clamp-2 break-all text-center text-xs">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, praesentium.</span>
  </div>
</div>

DEMO on Tailwind Play.

the easy thing I did was to change the overflow to the top div.

<div class="grid w-full gap-4 grid-cols-8">
  <div class="flex w-full flex-col gap-1 justify-center overflow-hidden items-center max-w-small cursor-not-allowed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="tabler-icon tabler-icon-file-filled h-10 w-10">
      <path d="M12 2l.117 .007a1 1 0 0 1 .876 .876l.007 .117v4l.005 .15a2 2 0 0 0 1.838 1.844l.157 .006h4l.117 .007a1 1 0 0 1 .876 .876l.007 .117v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-10a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-14a3 3 0 0 1 2.824 -2.995l.176 -.005h5z"></path>
      <path d="M19 7h-4l-.001 -4.001z"></path>
    </svg>
    <span class="text-ellipsis text-center text-xs">sssssssssssssssssssssssssssadasd</span>
  </div>
  <div class="flex w-full flex-col gap-1 justify-center overflow-hidden items-center max-w-small cursor-not-allowed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="tabler-icon tabler-icon-file-filled h-10 w-10">
      <path d="M12 2l.117 .007a1 1 0 0 1 .876 .876l.007 .117v4l.005 .15a2 2 0 0 0 1.838 1.844l.157 .006h4l.117 .007a1 1 0 0 1 .876 .876l.007 .117v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-10a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-14a3 3 0 0 1 2.824 -2.995l.176 -.005h5z"></path>
      <path d="M19 7h-4l-.001 -4.001z"></path>
    </svg><span class="text-ellipsis text-center text-xs">dummy.mibasdasdasdsad</span></div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Why isn't the following text being collapsed into a ellipsis?

Answers