properties
changelog

Text Overflow

Handle overflowing text.

Usage:

  • @text overflow-*;
  • @text overflow-truncate;
  • @text overflow-truncate-unset;

Reference

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

	properties: {
		text: {
			overflow: {
				DEFAULT: {
					property: "text-overflow: <v><i>;",
					values: {
						ellipsis: "ellipsis",
						clip: "clip",
					},
				},

				truncate: {
					property: "<v>",
					special: true,
					values: {
						DEFAULT: `
							overflow: hidden<i>;
							text-overflow: ellipsis<i>;
							white-space: nowrap<i>;
						`,
						unset: `
							overflow: unset<i>;
							text-overflow: unset<i>;
							white-space: unset<i>;
						`,
					},
				},
			},
		},
	},
};

export default shilpConfig;