{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-line-clamp/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"f7d1b255-9e9d-51e5-b229-f1b897a4018c","title":"Tailwind CSS Line Clamp","slug":"/classes/tailwind-line-clamp/"},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"lastUpdated\": \"6 May 2024\",\n  \"title\": \"Tailwind CSS Line Clamp\",\n  \"metaTitle\": \"Tailwind CSS Line Clamp\",\n  \"metaDescription\": \"The line-clamp utility class in Tailwind CSS allows you to truncate text and limit it to a specified number of lines, while also adding an ellipsis (...) to indicate that the text has been truncated.\",\n  \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-line-clamp\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Tailwind Line Clamp\"), mdx(\"p\", null, \"The line-clamp utility class in Tailwind CSS allows you to truncate text and limit it to a specified number of lines, while also adding an ellipsis (...) to indicate that the text has been truncated. With Tailwind's line-clamp class, you can prevent text from overflowing its container and create a visually appealing design.\"), mdx(\"h2\", null, \"Applying Line Clamp\"), mdx(\"p\", null, \"To apply line clamp to an element's text, you can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"line-clamp-{value}\"), \" utility class, where {value} represents the desired number of lines to display.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"mx-auto bg-green-200\\\">\\n  <h1>Hello World</h1>\\n  <p class=\\\"line-clamp-3\\\">\\n    We have to learn to make health conversations and protect our environment from the unhealth way\\n    we live. Keep making deep conversations and protecting our beautiful world.\\n  </p>\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"rounded-t-xl overflow-hidden bg-green-100 p-10\"\n  }, mdx(\"div\", {\n    className: \"mx-auto max-w-sm bg-green-200 p-8 text-sm leading-6 text-green-800 shadow-xl dark:bg-green-800 sm:text-base sm:leading-7\"\n  }, mdx(\"h1\", {\n    className: \"font-extrabold mb-3 text-center\"\n  }, \"Hello World\"), mdx(\"p\", {\n    className: \"line-clamp-3 text-sm\"\n  }, \"We have to learn to make health conversations and protect our environment from the unhealth way we live. Keep making deep conversations and protecting our beautiful world.\"))), mdx(\"h2\", null, \"Responsive Line Clamp\"), mdx(\"p\", null, \"Tailwind CSS allows you to apply line clamp classes responsively at different breakpoints. To use responsive line clamp classes, you can append the breakpoint prefix to the utility class. For example, md:line-clamp-2 limits the text to two lines starting from the medium breakpoint and above.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"line-clamp-2 md:line-clamp-3\\\">\\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor et velit aliquam\\n  efficitur.\\n</div>\\n\")), mdx(\"p\", null, \"In the above example, the text within the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<div>\"), \" element is limited to two lines by default (line-clamp-2), but starting from the medium breakpoint and above, it expands to three lines (md:line-clamp-3).\"), mdx(\"h2\", null, \"Note on Browser Support\"), mdx(\"p\", null, \"Please note that the line-clamp utility class relies on the CSS property line-clamp, which is not supported in all browsers. It is supported in modern browsers such as Chrome, Firefox, and Safari, but has limited support in older versions of Internet Explorer and Edge. Make sure to test the line clamp behavior in your target browser environments.\"), mdx(\"h2\", null, \"Tailwind Line-clamp Class Table\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Class\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Properties\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"line-clamp-1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"overflow: hidden; display: -webkit-box;\", mdx(\"br\", null), \"-webkit-box-orient: vertical;\", mdx(\"br\", null), \"-webkit-line-clamp: 1;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"line-clamp-2\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"overflow: hidden; display: -webkit-box;\", mdx(\"br\", null), \"-webkit-box-orient: vertical;\", mdx(\"br\", null), \"-webkit-line-clamp: 2;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"line-clamp-3\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"overflow: hidden; display: -webkit-box;\", mdx(\"br\", null), \"-webkit-box-orient: vertical;\", mdx(\"br\", null), \"-webkit-line-clamp: 3;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"line-clamp-4\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"overflow: hidden;display: -webkit-box;\", mdx(\"br\", null), \"-webkit-box-orient: vertical;\", mdx(\"br\", null), \"-webkit-line-clamp: 4;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"line-clamp-5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"overflow: hidden;display: -webkit-box;\", mdx(\"br\", null), \"-webkit-box-orient: vertical;\", mdx(\"br\", null), \"-webkit-line-clamp: 5;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"line-clamp-6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"overflow: hidden;display: -webkit-box;\", mdx(\"br\", null), \"-webkit-box-orient: vertical;\", mdx(\"br\", null), \"-webkit-line-clamp: 6;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"line-clamp-none\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"overflow: visible;display: block;\", mdx(\"br\", null), \"-webkit-box-orient: horizontal;\", mdx(\"br\", null), \"-webkit-line-clamp: none;\")))), mdx(\"h2\", null, \"Windframe Tailwind blocks\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://app.windframe.dev/editor?id=header17\"\n  }, \"Landing page\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#tailwind-line-clamp","title":"Tailwind Line Clamp","items":[{"url":"#applying-line-clamp","title":"Applying Line Clamp"},{"url":"#preview","title":"Preview"},{"url":"#responsive-line-clamp","title":"Responsive Line Clamp"},{"url":"#note-on-browser-support","title":"Note on Browser Support"},{"url":"#tailwind-line-clamp-class-table","title":"Tailwind Line-clamp Class Table"},{"url":"#windframe-tailwind-blocks","title":"Windframe Tailwind blocks"}]}]},"parent":{"__typename":"File","relativePath":"classes/tailwind-line-clamp.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Tailwind CSS Line Clamp","lastUpdated":"6 May 2024","metaDescription":"The line-clamp utility class in Tailwind CSS allows you to truncate text and limit it to a specified number of lines, while also adding an ellipsis (...) to indicate that the text has been truncated."}}},"pageContext":{"id":"f7d1b255-9e9d-51e5-b229-f1b897a4018c"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","4045616534","956403285"]}