{"id":270438,"date":"2018-05-17T06:57:42","date_gmt":"2018-05-17T13:57:42","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=270438"},"modified":"2021-12-28T12:22:10","modified_gmt":"2021-12-28T20:22:10","slug":"block-overflow","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/b\/block-overflow\/","title":{"rendered":"block-overflow"},"content":{"rendered":"\n<p>The <code>block-overflow<\/code> 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 <code>max-lines<\/code> property.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>The property has been introduced in the Editor&#8217;s Draft of the <a href=\"https:\/\/drafts.csswg.org\/css-overflow-3\/#propdef-block-overflow\" rel=\"noopener\">CSS Overflow Module Level 3 specification<\/a>. That means it&#8217;s experimental at the moment and considered a work in progress. In fact, you can <a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/390\" rel=\"noopener\">follow the conversation<\/a> which includes chatter about renaming the property altogether.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"syntax\">Syntax<\/h3>\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">.module {\n  block-overflow: [clip | ellipsis | ];\n  max-lines: []; \/* required by block-overflow *\/\n}<\/code><\/pre>\n\n\n\n<p><code>block-overflow<\/code> accepts the following values:<\/p>\n\n\n\n<ul><li><code>clip<\/code>: Does not insert a character to indicate more text to follow. Instead, the content is merely truncated and cut off at the last character.<\/li><li><code>ellipsis<\/code>: Displays an ellipsis (&#8230;) at the end of the last line. It 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.<\/li><li><code>&lt;string&gt;<\/code>: Displays custom text (e.g. &#8220;Read more \u2192&#8221;) at the end of the last line. The spec says that the User-Agent may replace the string with an ellipsis if the string is &#8220;absurdly&#8221; long.<\/li><\/ul>\n\n\n\n<p>Again, all of this is experimental, in-progress work. These values could change. Or, more could be added. For example, there have been calls for a &#8220;smarter&#8221; ellipsis that might be capable of doing more things, like cropping text in the middle:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">One thing led to another and \n... \nyada yada yada, that was that.<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"use-lineclamp-for-short\">Use <code>line-clamp<\/code> for short<\/h3>\n\n\n<p>We can get just about the same thing using <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/l\/line-clamp\/\"><code>line-clamp<\/code><\/a> which is shorthand for the <code>block-overflow<\/code> and <code>max-lines<\/code> properties.<\/p>\n\n\n\n<p>As it&#8217;s currently defined, though, <code>line-clamp<\/code> only accepts a single numeric value for <code>max-lines<\/code> and implicitly sets <code>block-overflow<\/code> to the <code>ellipsis<\/code> value. So, if you want to use a custom string for truncation, then you gotta go with the long form instead.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser Support<\/h3>\n\n\n<p>None at the moment, but you can get some support using the WebKit&#8217;s proprietary implementation of <code>line-clamp<\/code>:<\/p>\n\n\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\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More information<\/h3>\n\n\n<ul><li><a href=\"https:\/\/drafts.csswg.org\/css-overflow-3\/#propdef-block-overflow\" rel=\"noopener\">CSS Overflow Module Level 3<\/a> &#8211; The editor&#8217;s draft where block overflow is introduced<\/li><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><li><a href=\"https:\/\/css-tricks.com\/line-clampin\/\">Line Clampin\u2019 (Truncating Multiple Line Text)<\/a> &#8211; by Chris Coyier<\/li><li><a href=\"https:\/\/github.com\/josephschmitt\/Clamp.js\" rel=\"noopener\">Clamp.js<\/a> &#8211; a JavaScript method for cross-browser support<\/li><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><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>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.<\/p>\n","protected":false},"author":2508,"featured_media":270440,"parent":13913,"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],"acf":[],"jetpack-related-posts":[{"id":14119,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-overflow\/","url_meta":{"origin":270438,"position":0},"title":"text-overflow","date":"September 6, 2011","format":false,"excerpt":"The text-overflow property in CSS deals with situations where text is clipped when it overflows the element's box. It can be clipped (i.e. cut off, hidden), display an ellipsis ('\u2026', Unicode Range Value U+2026) or display an author-defined string (no current browser support for author-defined strings). .ellipsis { text-overflow: ellipsis;\u2026","rel":"","context":"With 18 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":250100,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/overflow-wrap\/","url_meta":{"origin":270438,"position":1},"title":"overflow-wrap","date":"January 17, 2017","format":false,"excerpt":"The overflow-wrap property in CSS allows you to specify that the browser can break a line of text inside the targeted element onto multiple lines in an otherwise unbreakable place. This helps to avoid an unusually long string of text causing layout problems due to overflow. .example { overflow-wrap: break-word;\u2026","rel":"","context":"In \"overflow-wrap\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":270697,"url":"https:\/\/css-tricks.com\/max-lines\/","url_meta":{"origin":270438,"position":2},"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":14081,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/overflow\/","url_meta":{"origin":270438,"position":3},"title":"overflow","date":"September 5, 2011","format":false,"excerpt":"The overflow property controls what happens to content that breaks outside of its bounds: imagine a div in which you've explicitly set to be 200px wide, but contains an image that is 300px wide. That image will stick out of the div and be visible by default. Whereas if you\u2026","rel":"","context":"In \"overflow\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/overflow-visible.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":359742,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/overflow-clip-margin\/","url_meta":{"origin":270438,"position":4},"title":"overflow-clip-margin","date":"January 3, 2022","format":false,"excerpt":"The CSS overflow-clip-margin property determines how far the overflow of an element can go beyond the element's box before being clipped. This area is called the overflow clip edge. .element { height: 100px; overflow: clip; \/* required *\/ overflow-clip-margin: 20px; } overflow: clip; clips the element's content while overflow-clip-margin sets\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":[]},{"id":270051,"url":"https:\/\/css-tricks.com\/almanac\/properties\/l\/line-clamp\/","url_meta":{"origin":270438,"position":5},"title":"line-clamp","date":"April 27, 2018","format":false,"excerpt":"The line-clamp property truncates text at a specific number of lines. The spec for it is currently an Editor's Draft, so that means nothing here is set in stone because it's a work in progress. That said, it's defined as a shorthand for max-lines and block-overflow, the former of which\u2026","rel":"","context":"In \"line-clamp\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/270438"}],"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=270438"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/270438\/revisions"}],"predecessor-version":[{"id":360026,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/270438\/revisions\/360026"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13913"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/270440"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=270438"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=270438"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}