tailwindcss plugin 之 line-clamp

[dailynodejs]

源码地址：https://github.com/tailwindlabs/tailwindcss-line-clamp/blob/master/src/index.js

A plugin that provides utilities for visually truncating text after a fixed number of lines.

Class	CSS
line-clamp-1	overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;
line-clamp-2	overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;
line-clamp-3	overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;
line-clamp-4	overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;
line-clamp-5	overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 5;
line-clamp-6	overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 6;
line-clamp-none	-webkit-line-clamp: unset;

[dailynodejs]

const plugin = require('tailwindcss/plugin')

const lineClamp = plugin(
  function ({ addUtilities, theme, variants, e }) {
    const values = theme('lineClamp')

    addUtilities(
      [
        Object.entries(values).map(([key, value]) => {
          return {
            [`.${e(`line-clamp-${key}`)}`]: {
              overflow: 'hidden',
              display: '-webkit-box',
              '-webkit-box-orient': 'vertical',
              '-webkit-line-clamp': `${value}`,
            },
          }
        }),
        {
          '.line-clamp-none': {
            '-webkit-line-clamp': 'unset',
          },
        },
      ],
      variants('lineClamp')
    )
  },
  {
    theme: {
      lineClamp: {
        1: '1',
        2: '2',
        3: '3',
        4: '4',
        5: '5',
        6: '6',
      },
    },
    variants: {
      lineClamp: ['responsive'],
    },
  }
)

module.exports = lineClamp