CODEWITHSUNDEEP
csstailwind-css
Ben Pople
Ben Pople

Reputation: 45

Tailwind CSS truncate after filling a space

I am building a card with Tailwind CSS and Vue.js. I want to fill a space on my card with text and truncate any remaining text that doesn't fit with an ellipsis.

I have applied Tailwinds .truncate class however it only allows me to have 1 line of text before the ellipsis. I have also looked into the line-clamp property but I was hoping there would be a nicer way to do this with Tailwind.

<template>
     <div class="p-6 w-full bg-white rounded-lg overflow-hidden shadow-lg border">
        <div class="flex flex-col sm:flex-row">
            <img src="img/card-default.jpg" class="mx-auto" alt="Card">
            <div class="mt-4 overflow-hidden sm:ml-4 flex flex-col justify-between">
                <div>
                    <h2 class="text-gray-900 font-semibold text-lg">Title</h2>
                    <p class="truncate mt-2 text-gray-700 max-h-full">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                        Tempore repellat labore distinctio maxime, debitis autem perferendis dolore, 
                        deleniti doloribus quia vel! Amet nisi, a vel modi officiis sapiente fugiat, 
                        illum delectus, incidunt repellendus suscipit. Delectus iusto eligendi, doloribus amet et fugiat,
                         atque perspiciatis eveniet, ipsum inventore sed placeat sapiente maiores.
                    </p>
                </div>
                <div class="flex justify-around mt-4 mx-2 sm:mx-0">
                    <button class="mx-2 bg-indigo-600 p-2 rounded-lg text-white hover:bg-indigo-500 sm:mx-0">Button 1</button>
                    <button class="mx-2 bg-indigo-600 p-2 rounded-lg text-white hover:bg-indigo-500 sm:mx-0">Button 2</button>
                </div>
            </div>
        </div>
     </div>
</template>

truncation_problem]

Upvotes: 3

Views: 4518

Answers (3)

Simon O
Simon O

Reputation: 9

A solution that worked for me was to put a max-height on the <p> tag

Upvotes: 1

Sreeram Venkitesh
Sreeram Venkitesh

Reputation: 318

Use the @tailwind/line-clamp plugin

<p className="line-clamp-n"> where n stands for the number of lines you want before truncating

Upvotes: 3

Davy de Vries
Davy de Vries

Reputation: 5123

Short answer: Nope their isn’t a nicer solution for this.

tailwind is meant to be cover the ‘basics’ like padding, margin, grid etc for developers/designers so they can create easily and fast pages/components.

What you are using/asking is totally custom for your situation only.

Possible solution for your problem:

  • Write a tailwind plug-in that extends the default tailwind css
  • Extend tailwind.scss with your custom css
  • Or just css (in-line or just your custom css file)

Upvotes: 2

Related Questions