Je construis une carte avec Tailwind CSS et Vue.js. Je veux remplir un espace sur ma carte avec du texte et tronquer tout texte restant qui ne correspond pas à des points de suspension.

J'ai appliqué la classe Tailwinds .truncate, mais cela ne me permet d'avoir qu'une ligne de texte avant les points de suspension. J'ai également examiné la propriété Line-clamp, mais j'espérais qu'il y aurait une meilleure façon de le faire avec 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]

0
Ben Pople 6 nov. 2019 à 14:53

1 réponse

Meilleure réponse

Réponse courte: Non, ce n'est pas une meilleure solution pour cela.

tailwind est censé couvrir les «bases» comme le rembourrage, la marge, la grille, etc. pour les développeurs / concepteurs afin qu'ils puissent créer facilement et rapidement des pages / composants.

Ce que vous utilisez / demandez est totalement personnalisé uniquement pour votre situation.

Solution possible à votre problème:

  • Écrire un plug-in Tailwind qui étend le CSS Tailwind par défaut
  • Étendez tailwind.scss avec votre css personnalisé
  • Ou tout simplement css (en ligne ou simplement votre fichier css personnalisé)
1
Davy de Vries 6 nov. 2019 à 12:07