{"id":270051,"date":"2018-04-27T06:53:04","date_gmt":"2018-04-27T13:53:04","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=270051"},"modified":"2019-08-17T19:19:38","modified_gmt":"2019-08-18T02:19:38","slug":"line-clamp","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/l\/line-clamp\/","title":{"rendered":"line-clamp"},"content":{"rendered":"<p>The <code>line-clamp<\/code> property truncates text at a specific number of lines.<\/p>\n<p>The spec for it is currently an Editor&#8217;s Draft, so that means nothing here is set in stone because it&#8217;s a work in progress. That said, it&#8217;s defined as a shorthand for <code>max-lines<\/code> and <code>block-overflow<\/code>, the former of which is noted as at risk of being dropped in the Candidate Recommendation.<\/p>\n<p><!--more--><\/p>\n<p>It&#8217;s easy to see how <code>max-lines<\/code> would be nixed since it&#8217;s function (setting the number of lines before truncating) is already baked into <code>line-clamp<\/code> and any further abstraction might be unnecessary. But that&#8217;s getting us off track, so let&#8217;s move on.<\/p>\n<h3>Syntax<\/h3>\n<pre rel=\"CSS\"><code class=\"language-css\">.module {\r\n  line-clamp: [none | &lt;integer&gt;];\r\n}<\/code><\/pre>\n<p><code>line-clamp<\/code> accepts the following values in the current draft of the spec:<\/p>\n<ul>\n<li><code>none<\/code>: sets no maximum on the number of lines and no truncation will happen as a result.<\/li>\n<li><code>&lt;integer&gt;<\/code>: sets the maximum number of lines before truncating the content and then displays an ellipsis (&#8230;) at the end of the last line.<\/li>\n<\/ul>\n<p>That ellipsis should render as a Unicode character (U+2026) but could be replaced by an equivalent based on the content language and writing mode of the User-Agent being used.<\/p>\n<h3>Hey, can&#8217;t I do this with text-overflow?<\/h3>\n<p>Fair question, my friend, and the answer is, well&#8230;<\/p>\n<p>(See what I did there?)<\/p>\n<p>&#8230;<em>sorta<\/em>.<\/p>\n<p><code>text-overflow<\/code> does indeed have an <code>ellipsis<\/code> value that will truncate text:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.truncate {\r\n  text-overflow: ellipsis;\r\n\r\n  \/* Needed to make it work *\/\r\n  overflow: hidden;\r\n  white-space: nowrap;\r\n}<\/code><\/pre>\n<p data-height=\"300\" style=\"height: 300px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"vjEMXg\" data-default-tab=\"result\" data-user=\"geoffgraham\" data-embed-version=\"2\" data-pen-title=\"text-overflow\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/geoffgraham\/pen\/vjEMXg\/\" rel=\"noopener\">text-overflow<\/a> by Geoff Graham (<a href=\"https:\/\/codepen.io\/geoffgraham\" rel=\"noopener\">@geoffgraham<\/a>) on <a href=\"https:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>Nice nice, that&#8217;s a good start. But what if we want to introduce the ellipsis not on the first line but somewhere, say, the third line of text?<\/p>\n<p>That&#8217;s where <code>line-clamp<\/code> comes into play. Just note that a combination of three properties are used to make it happen:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.line-clamp {\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 3;\r\n  -webkit-box-orient: vertical;  \r\n  overflow: hidden;\r\n}<\/code><\/pre>\n<p data-height=\"300\" style=\"height: 300px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"PewgjE\" data-default-tab=\"result\" data-user=\"geoffgraham\" data-embed-version=\"2\" data-pen-title=\"line-clamp (-webkit)\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/geoffgraham\/pen\/PewgjE\/\" rel=\"noopener\">line-clamp (-webkit)<\/a> by Geoff Graham (<a href=\"https:\/\/codepen.io\/geoffgraham\" rel=\"noopener\">@geoffgraham<\/a>) on <a href=\"https:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>Firefox supports this now, <em>exactly this way<\/em> (with the <code>-webkit-<\/code> prefixes and all). <\/p>\n<h3>So, what&#8217;s the catch?<\/h3>\n<p>As of right now, it&#8217;s browser support. Line clamps are part of the CSS Overflow Module Level 3 which is currently in Editor&#8217;s Draft and totally unsupported at the moment.<\/p>\n<p>We can get some line clamping action with a <code>-webkit-<\/code> prefix (which, weirdly enough, works across all major browsers). In fact, that&#8217;s how the demo above was done.<\/p>\n<p>We could go down the JavaScript path if we&#8217;d like. <a href=\"https:\/\/github.com\/josephschmitt\/Clamp.js\" rel=\"noopener\">Clamp.js<\/a> will do the trick:<\/p>\n<p data-height=\"300\" style=\"height: 300px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"BxyEqP\" data-default-tab=\"result\" data-user=\"geoffgraham\" data-embed-version=\"2\" data-pen-title=\"line-clamp (clamp.js)\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/geoffgraham\/pen\/BxyEqP\/\" rel=\"noopener\">line-clamp (clamp.js)<\/a> by Geoff Graham (<a href=\"https:\/\/codepen.io\/geoffgraham\" rel=\"noopener\">@geoffgraham<\/a>) on <a href=\"https:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<h3>Browser Support<\/h3>\n<p>This is the support for WebKit&#8217;s propriety and undocumented implementation of line clamp.<\/p>\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=css-line-clamp\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">14*<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">68*<\/span><\/td><td class=\"n nope\" title=\"IE - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">17<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">5*<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">123*<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">124*<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">2.3*<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">5.0-5.1*<\/span><\/td><\/tr><\/table><\/div><\/div>\n<h3>Additional Resources<\/h3>\n<ul>\n<li><a href=\"https:\/\/drafts.csswg.org\/css-overflow-3\/#line-clamp\" rel=\"noopener\">CSS Overflow Module Level 3<\/a> &#8211; The editor&#8217;s draft where line clamp is introduced<\/li>\n<li><a href=\"https:\/\/developer.apple.com\/library\/content\/documentation\/AppleApplications\/Reference\/SafariCSSRef\/Articles\/StandardCSSProperties.html#\/\/apple_ref\/doc\/uid\/TP30001266-WebKit_SpecificUnsupportedProperties\" rel=\"noopener\">Safari CSS Reference<\/a> &#8211; Documentation for the unsupported WebKit implementation<\/li>\n<li><a href=\"https:\/\/css-tricks.com\/line-clampin\/\">Line Clampin\u2019 (Truncating Multiple Line Text)<\/a> &#8211; by Chris Coyier<\/li>\n<li><a href=\"https:\/\/github.com\/josephschmitt\/Clamp.js\" rel=\"noopener\">Clamp.js<\/a> &#8211; a JavaScript method for cross-browser support<\/li>\n<li><a href=\"https:\/\/daverupert.com\/2018\/04\/pitfalls-of-card-uis\/\" rel=\"noopener\">Pitfalls of Card UIs<\/a> &#8211; Dave Rupert considers the dangers of truncating text<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The line-clamp property truncates text at a specific number of lines. The spec for it is currently an Editor&#8217;s Draft, so that means nothing here is set in stone because it&#8217;s a work in progress. That said, it&#8217;s defined as a shorthand for max-lines and block-overflow, the former of which is noted as at risk [&hellip;]<\/p>\n","protected":false},"author":2508,"featured_media":0,"parent":13933,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[1413,1414],"acf":[],"jetpack-related-posts":[{"id":270438,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/block-overflow\/","url_meta":{"origin":270051,"position":0},"title":"block-overflow","date":"May 17, 2018","format":false,"excerpt":"The block-overflow property truncates text and indicates more content follows by inserting an ellipsis or custom string after a number of lines that is set by the max-lines property. The property has been introduced in the Editor's Draft of the CSS Overflow Module Level 3 specification. That means it's experimental\u2026","rel":"","context":"In \"line-clamp\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/ellipses-brackets.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":270697,"url":"https:\/\/css-tricks.com\/max-lines\/","url_meta":{"origin":270051,"position":1},"title":"max-lines","date":"May 18, 2018","format":false,"excerpt":"The max-lines property limits the content of a block to a maximum number of lines before being cut off and can create a line clamping effect when combined with block-overflow. In fact, both properties make up the line-clamp property, which is a shorthand for combining them. It's worth noting at\u2026","rel":"","context":"In \"line-clamp\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":194405,"url":"https:\/\/css-tricks.com\/snippets\/sass\/clamping-number\/","url_meta":{"origin":270051,"position":2},"title":"Clamping a Number","date":"January 28, 2015","format":false,"excerpt":"In computer science, we use the word clamp as a way to restrict a number between two other numbers. When clamped, a number will either keep its own value if living in the range imposed by the two other values, take the lower value if initially lower than it, or\u2026","rel":"","context":"With 1 comment","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":8542,"url":"https:\/\/css-tricks.com\/snippets\/css\/truncate-string-with-ellipsis\/","url_meta":{"origin":270051,"position":3},"title":"Truncate String with Ellipsis","date":"February 18, 2011","format":false,"excerpt":"All the following are required, so the text must be in a single straight line that overflows a box where that overflow is hidden. .truncate { width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } CodePen Embed Fallback Note the fixed width in use here. The gist is that the\u2026","rel":"","context":"In \"ellipsis\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":325124,"url":"https:\/\/css-tricks.com\/almanac\/properties\/l\/line-break\/","url_meta":{"origin":270051,"position":4},"title":"line-break","date":"November 6, 2020","format":false,"excerpt":"The CSS line-break property defines how strictly to enforce rules for wrapping text wrapping on new lines, particularly when working with symbols and punctuations in Chinese, Japanese or Korean (CJK) writing systems. It is included in the CSS Text Module Level 3 specification, which is currently in Editor's Draft. .element\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":366092,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-template\/","url_meta":{"origin":270051,"position":5},"title":"grid-template","date":"May 26, 2022","format":false,"excerpt":"The grid-template CSS property is a shorthand that allows you to define grid columns, rows, and areas in a CSS grid container with one declaration. .grid-container { display: grid; grid-template: \"header header\" \"sidebar main\" 1fr \"footer footer\" min-content \/ 250px 1fr; } Constituent properties As mentioned, grid-template is a shorthand\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/270051"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=270051"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/270051\/revisions"}],"predecessor-version":[{"id":294604,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/270051\/revisions\/294604"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13933"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=270051"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=270051"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}