Tailwind CSS Line Clamp: Dễ Dàng Cắt Ngắn Văn Bản với Các Tiện Ích Tailwind

@tailwindcss/line-clamp

Một plugin cung cấp các tiện ích để cắt ngắn một phần văn bản sau một số dòng cố định.

Cảnh báo Kể từ Tailwind CSS phiên bản 3.3, các tiện ích line-clamp hiện đã được bao gồm trong framework mặc định và không cần cài đặt thêm plugin này nữa.

Cài đặt

Cài đặt plugin từ npm:

npm install -D @tailwindcss/line-clamp

Sau đó, thêm plugin vào tệp tailwind.config.js của bạn:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/line-clamp'),
    // ...
  ],
}

Sử dụng

Sử dụng các tiện ích line-clamp-{n} để chỉ định bao nhiêu dòng văn bản sẽ hiển thị trước khi cắt ngắn:

<p class="line-clamp-3">
  Et molestiae hic earum repellat aliquid est doloribus delectus. Enim illum odio porro ut omnis dolor debitis natus. Voluptas possimus deserunt sit delectus est saepe nihil. Qui voluptate possimus et quia. Eligendi voluptas voluptas dolor cum. Rerum est quos quos id ut molestiae fugit.
</p>

Để loại bỏ bất kỳ giới hạn dòng nào, hãy sử dụng line-clamp-none:

<p class="line-clamp-3 md:line-clamp-none">
  Et molestiae hic earum repellat aliquid est doloribus delectus. Enim illum odio porro ut omnis dolor debitis natus. Voluptas possimus deserunt sit delectus est saepe nihil. Qui voluptate possimus et quia. Eligendi voluptas voluptas dolor cum. Rerum est quos quos id ut molestiae fugit.
</p>

Lưu ý rằng các tiện ích line-clamp-{n} đặt các thuộc tính khác như display và overflow, ngoài -webkit-line-clamp mà không bị gỡ bỏ bởi line-clamp-none, vì vậy, tùy thuộc vào mục tiêu bạn đang cố gắng đạt được, bạn có thể cần ghi đè rõ ràng các thuộc tính đó bằng các tiện ích như flex hoặc overflow-visible.

Mặc định, các tiện ích cho việc cắt ngắn văn bản tới 6 dòng đã được tạo ra:

Cấu hình

Bạn có thể cấu hình giá trị và biến thể nào được tạo ra bởi plugin này trong khóa lineClamp trong tệp tailwind.config.js của bạn.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      lineClamp: {
        7: '7',
        8: '8',
        9: '9',
        10: '10',
      }
    }
  },
  variants: {
    lineClamp: ['responsive', 'hover']
  }
}

Chi tiết Tải về:

Tác giả: tailwindlabs
Mã nguồn: https://github.com/tailwindlabs/tailwindcss-line-clamp

Giấy phép: MIT license