Усеченный попутный ветер после заполнения пробела - PullRequest
Новая
       24

Усеченный попутный ветер после заполнения пробела

0 голосов
/ 06 ноября 2019

Я создаю карту с Tailwind CSS и Vue.js. Я хочу заполнить пробел на моей карточке текстом и обрезать любой оставшийся текст, который не подходит к многоточию.

Я применил класс Tailwinds .truncate, однако он позволяет мне иметь только 1 строку текста передмноготочиеЯ также изучил свойство линейного зажима, но надеялся, что с 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]

1 Ответ

1 голос
/ 06 ноября 2019

Краткий ответ: Нет, это не лучшее решение для этого.

попутный ветер предназначен для охвата «основ», таких как отступы, поля, сетка и т. Д. Для разработчиков / дизайнеров, чтобы они моглиСоздавайте легко и быстро страницы / компоненты.

То, что вы используете / спрашиваете, полностью индивидуально для вашей ситуации.

Возможное решение вашей проблемы:

  • Напишите плагин попутного ветра, который расширяет стандартный попутный ветер css
  • Расширьте tailwind.scss с помощью пользовательского css
  • Или просто css (in-line или просто вашпользовательский файл CSS)
...