├── LICENSE ├── README.md ├── index.js └── package.json /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2020 Joan Piedra 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | 6 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 7 | 8 | * No Harm: The software may not be used by anyone for systems or activities that actively and knowingly endanger, harm, or otherwise threaten the physical, mental, economic, or general well-being of other individuals or groups, in violation of the United Nations Universal Declaration of Human Rights (https://www.un.org/en/universal-declaration-human-rights/). 9 | 10 | * Services: If the Software is used to provide a service to others, the licensee shall, as a condition of use, require those others not to use the service in any way that violates the No Harm clause above. 11 | 12 | * Enforceability: If any portion or provision of this License shall to any extent be declared illegal or unenforceable by a court of competent jurisdiction, then the remainder of this License, or the application of such portion or provision in circumstances other than those as to which it is so declared illegal or unenforceable, shall not be affected thereby, and each portion and provision of this Agreement shall be valid and enforceable to the fullest extent permitted by law. 13 | 14 | 15 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 16 | 17 | This Hippocratic License is an Ethical Source license (https://ethicalsource.dev) derived from the MIT License, amended to limit the impact of the unethical use of open source software. 18 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 |
3 | A utility-first CSS framework for rapidly building custom user interfaces. 4 |

5 | 6 | --- 7 | 8 |
9 | 10 | # Tailwind CSS `line-clamp` utilities 11 | 12 | This is a Tailwind CSS plugin that adds utilities to restrict the amount of lines an element can have by using the CSS property [line-clamp](https://css-tricks.com/almanac/properties/l/line-clamp/). 13 | 14 | Maintained by: [Joan Piedra](https://joanpiedra.com) → [@neojp](https://twitter.com/neojp) 15 | 16 | ## Installation 17 | 18 | Install as a node module with either `npm` or `yarn` on your command line 19 | 20 | ```bash 21 | # Install via npm 22 | npm install --save-dev @neojp/tailwindcss-line-clamp-utilities 23 | 24 | # Install via yarn 25 | yarn add --dev @neojp/tailwindcss-line-clamp-utilities 26 | ``` 27 | 28 | Add this module as a plugin on your [Tailwind configuration file](https://tailwindcss.com/docs/configuration#plugins) (`tailwind.config.js`). 29 | 30 | ```js 31 | module.exports = { 32 | plugins: [ 33 | require('@neojp/tailwindcss-line-clamp-utilities') 34 | ] 35 | }; 36 | ``` 37 | 38 | ### Variants 39 | 40 | Note that this plugin allows the usage of variants through the key `lineClamp` and will default to your global variant setting. 41 | 42 | ```js 43 | module.exports = { 44 | variants: { 45 | lineClamp: ['responsive'] 46 | } 47 | }; 48 | ``` 49 | 50 | 51 | ## Usage 52 | 53 | Use the Tailwind utility classes provided by this plugin. 54 | 55 | ```html 56 | 57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 | 68 | ``` 69 | 70 | ### Examples 71 | 72 | Restrict content to 3 lines: 73 | 74 | ```html 75 |
76 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar, dui vel viverra aliquet, sem nulla sollicitudin diam, et dapibus lectus neque vitae risus. Sed elit risus, facilisis in condimentum quis, luctus ac leo. Integer viverra vel orci quis accumsan. Etiam vitae elementum orci. Sed non venenatis lorem. Pellentesque a metus varius sapien finibus euismod ac et arcu. Donec eu nisl a sem pulvinar tristique in at massa.

77 |
78 | ``` 79 | 80 | Will be displayed as: 81 | 82 | ``` 83 | Lorem ipsum dolor sit amet, 84 | consectetur adipiscing elit. Nulla 85 | pulvinar, dui vel viverra aliquet, se... 86 | ``` 87 | 88 | ## Output 89 | 90 | Tailwind will be outputed as follows. 91 | 92 | ```css 93 | .line-clamp-1 { 94 | display: -webkit-box; 95 | -webkit-line-clamp: 1; 96 | -webkit-box-orient: vertical; 97 | overflow: hidden; 98 | } 99 | 100 | .line-clamp-2 { 101 | display: -webkit-box; 102 | -webkit-line-clamp: 2; 103 | -webkit-box-orient: vertical; 104 | overflow: hidden; 105 | } 106 | 107 | .line-clamp-3 { 108 | display: -webkit-box; 109 | -webkit-line-clamp: 3; 110 | -webkit-box-orient: vertical; 111 | overflow: hidden; 112 | } 113 | 114 | .line-clamp-4 { 115 | display: -webkit-box; 116 | -webkit-line-clamp: 4; 117 | -webkit-box-orient: vertical; 118 | overflow: hidden; 119 | } 120 | 121 | .line-clamp-5 { 122 | display: -webkit-box; 123 | -webkit-line-clamp: 5; 124 | -webkit-box-orient: vertical; 125 | overflow: hidden; 126 | } 127 | 128 | .line-clamp-6 { 129 | display: -webkit-box; 130 | -webkit-line-clamp: 6; 131 | -webkit-box-orient: vertical; 132 | overflow: hidden; 133 | } 134 | 135 | .line-clamp-7 { 136 | display: -webkit-box; 137 | -webkit-line-clamp: 7; 138 | -webkit-box-orient: vertical; 139 | overflow: hidden; 140 | } 141 | 142 | .line-clamp-8 { 143 | display: -webkit-box; 144 | -webkit-line-clamp: 8; 145 | -webkit-box-orient: vertical; 146 | overflow: hidden; 147 | } 148 | 149 | .line-clamp-9 { 150 | display: -webkit-box; 151 | -webkit-line-clamp: 9; 152 | -webkit-box-orient: vertical; 153 | overflow: hidden; 154 | } 155 | 156 | .line-clamp-10 { 157 | display: -webkit-box; 158 | -webkit-line-clamp: 10; 159 | -webkit-box-orient: vertical; 160 | overflow: hidden; 161 | } 162 | ``` 163 | 164 | ## Related plugins 165 | 166 | Shout out to [tailwindcss-aspect-ratio](https://github.com/webdna/tailwindcss-aspect-ratio) another plugin that attemps to handle aspect ratios on Tailwind CSS. 167 | 168 | ## Contributing 169 | 170 | Feel free to submit a PR request, and send me a message on Twitter ([@neojp](https://twitter.com/neojp)) about it. 171 | 172 | ## License 173 | This project has been licensed under [the Hippocratic License](https://firstdonoharm.dev/). -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | module.exports = function addLineClampUtilities({ addUtilities, variants }) { 2 | addUtilities({ 3 | '.line-clamp-1': { 'display': '-webkit-box', '-webkit-line-clamp': '1', '-webkit-box-orient': 'vertical', overflow: 'hidden' }, 4 | '.line-clamp-2': { 'display': '-webkit-box', '-webkit-line-clamp': '2', '-webkit-box-orient': 'vertical', overflow: 'hidden' }, 5 | '.line-clamp-3': { 'display': '-webkit-box', '-webkit-line-clamp': '3', '-webkit-box-orient': 'vertical', overflow: 'hidden' }, 6 | '.line-clamp-4': { 'display': '-webkit-box', '-webkit-line-clamp': '4', '-webkit-box-orient': 'vertical', overflow: 'hidden' }, 7 | '.line-clamp-5': { 'display': '-webkit-box', '-webkit-line-clamp': '5', '-webkit-box-orient': 'vertical', overflow: 'hidden' }, 8 | '.line-clamp-6': { 'display': '-webkit-box', '-webkit-line-clamp': '6', '-webkit-box-orient': 'vertical', overflow: 'hidden' }, 9 | '.line-clamp-7': { 'display': '-webkit-box', '-webkit-line-clamp': '7', '-webkit-box-orient': 'vertical', overflow: 'hidden' }, 10 | '.line-clamp-8': { 'display': '-webkit-box', '-webkit-line-clamp': '8', '-webkit-box-orient': 'vertical', overflow: 'hidden' }, 11 | '.line-clamp-9': { 'display': '-webkit-box', '-webkit-line-clamp': '9', '-webkit-box-orient': 'vertical', overflow: 'hidden' }, 12 | '.line-clamp-10': { 'display': '-webkit-box', '-webkit-line-clamp': '10', '-webkit-box-orient': 'vertical', overflow: 'hidden' } 13 | }, variants('lineClamp')); 14 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@neojp/tailwindcss-line-clamp-utilities", 3 | "description": "Tailwind CSS `line-clamp` utilities", 4 | "version": "1.0.1", 5 | "license": "SEE LICENSE IN LICENSE", 6 | "author": "Joan Piedra ", 7 | "main": "index.js", 8 | "repository": { 9 | "type": "git", 10 | "url": "git+ssh://git@github.com/neojp/tailwindcss-line-clamp-utilities.git" 11 | }, 12 | "bugs": { 13 | "url": "https://github.com/neojp/tailwindcss-line-clamp-utilities/issues" 14 | }, 15 | "homepage": "https://github.com/neojp/tailwindcss-line-clamp-utilities#readme", 16 | "scripts": { 17 | "test": "echo \"Error: no test specified\" && exit 1" 18 | }, 19 | "keywords": [ 20 | "tailwindcss", 21 | "tailwindcss-plugin", 22 | "tailwindcss-utilities", 23 | "tailwindcss-utility", 24 | "tailwindcss-line-clamp-utilities", 25 | "tailwindcss-line-clamp", 26 | "line-clamp-utilities", 27 | "line-clamp", 28 | "line-overflow", 29 | "css" 30 | ] 31 | } 32 | --------------------------------------------------------------------------------