properties
changelog

Visible Lines OR Line Clamp

Control number of visible text lines (clamping).

Usage:

  • @text lines-*;
  • @text lines-all;
  • @text lines-all-unset;

Reference

shilp.config.js
const shilpConfig = {
	source: "react",

	properties: {
		text: {
			lines: {
				DEFAULT: {
					property: "--lines: <v><i>;",
					values: {
						1: 1,
						2: 2,
						3: 3,
						4: 4,
					},
				},

				all: {
					property: "<v>",
					special: true,
					values: {
						visible: `
							overflow: visible<i>;
							display: block<i>;
							-webkit-box-orient: horizontal<i>;
							--lines: none<i>;
						`,
						unset: `
							overflow: unset<i>;
							display: unset<i>;
							-webkit-box-orient: unset<i>;
							--lines: unset<i>;
						`,
					},
				},
			},
		},
	},
};

export default shilpConfig;