[Feature Proposal]: Add "line-clamp" utility

[frontsideair]

I think there should be a line-clamp utility, even though it's non-standard, it has good support across the board. I'm interested in adding it myself if you think it's a good idea.

[benface]

FWIW, it is on the standards track: https://www.w3.org/TR/css-overflow-3/#line-clamp

[dwightwatson]

I implemented this as a component as it requires a few properties in order to work properly - including some -webkit hackery and overflow: hidden.

const _ = require('lodash');
const plugin = require('tailwindcss/plugin');

module.exports = plugin.withOptions(function (lineCounts = []) {
  return function ({ addComponents, e }) {
    const components = _.map(lineCounts, lineCount => ({
      [`.${e(`clamp-${lineCount}`)}`]: {
        '-webkit-box-orient': 'vertical',
        '-webkit-line-clamp':`${lineCount}`,
        'display': '-webkit-box',
        'lineClamp': lineCount,
        'overflow': 'hidden',
      }
    }));

    addComponents(components);
  };
});

Had to use string interpolation on -webkit-line-clamp otherwise it had px appended to the line count for some odd reason.

Would be good to see this feature make it into the core.

[vricop]

This is what I do in the scss utility library I'm working on –you won't find in in github yet, as it is a private repository.

/* _base.scss */

/* Required pre-setup declarations for `line-clamp-{size} */
[class*=line-clamp-] {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

/* _line-clamp.scss */

.line-clamp#{$modifier} {
  -webkit-line-clamp: $value;
}

Note: I omitted a lot of scss code for the shake of simplicity. Those variables came from an @each loop.

_base.scss would be what tailwind calls preflight.css. That's where I put my pre-setup declarations with the attribute selector [class*=line-clamp-] (specificity: 0,0,1,0). Now the _line-clmap.scss: this should be placed in your lineClamp.js plugin utility.

Then the config file will hold all values for the -webkit-line-clamp.

Update: The attribute selector avoids repeating the required properties for line-clamp utility. Then you can use line-clamp-{count} utility without redeclaring those properties.

[neojp]

FYI - I published a plugin 3 months ago with this functionality, hope it helps.

https://www.npmjs.com/package/@neojp/tailwindcss-line-clamp-utilities

[ulvidamirli]

Thank you for this great plugin. Could you please add display:-webkit-box as well? It is needed when we use "hidden sm:webkit-box md:line-clamp-2" scenario for example.

[ulvidamirli]

I tried https://github.com/tailwindlabs/tailwindcss-line-clamp as @dwightwatson suggested. And it solved my problem

[neojp]

My plugin has display: -webkit-box; as part of the line-clamp class. Anyway, I will probably deprecate it since there is an official plugin now.

[dwightwatson]

There's now an official line-clamp plugin: https://github.com/tailwindlabs/tailwindcss-line-clamp

[ulvidamirli]

I tried it and my problem solved. Now it works when I use "hidden sm:line-clamp-2". Thank you for mentioning!