Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Text in not getting truncated even after adding classname truncate in tailwind css

screen shot of how the text is looking.

The code:

<div className='flex flex-col'>
 {/* {details.name} */}
 sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
 <span className='text-muted-foreground'>
  <p className='truncate max-w-full'>
   {/* {details.address} */}
   ssssssssssssssssssssssssssssssssssssssssssssssssss
  </p>
 </span>
</div>

Even after using truncate , text-clip, the text is not getting clipped.

Tags:

2

Answers


  1. 0

    You can add w-full or w-screen to the parent and also add the truncate to parent so that first ssssss strings also get clipped, the parent element needs to have a width to clip the text

    Login or Signup to reply.
  2. 0

    Tailwind truncate utility actually applies these css:

    overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

    In your code, the parent div’s width is not set so it will be auto by default -> The container will be expanded to show the content and the text will not be "overflow". You can check this by checking the render of those elements.

    Setting the width of your container might fix your issue. In your case, you can set w-full to let the div.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search