{"id":241496,"date":"2016-05-11T07:31:36","date_gmt":"2016-05-11T14:31:36","guid":{"rendered":"http:\/\/css-tricks.com\/?p=241496"},"modified":"2017-02-08T21:11:43","modified_gmt":"2017-02-09T04:11:43","slug":"flexbox-truncated-text","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/flexbox-truncated-text\/","title":{"rendered":"Flexbox and Truncated Text"},"content":{"rendered":"

Situation: you have a single line of text in a flex child element. You don’t want that text to wrap, you want it truncated with ellipsis (or fall back to just hiding the overflow). But the worst happens. The unthinkable! The layout breaks and forces the entire flex parent element too wide. Flexbox is supposed to be helping<\/em> make layout easier<\/em>!<\/p>\n

Fortunately, there is a (standardized) solution. You just need to use a non-flexbox property\/value to do it.<\/p>\n

<\/p>\n

What we want<\/h3>\n
\"\"
Animated GIF showing the text truncating as the flex child gets narrower.<\/figcaption><\/figure>\n

The potential problem<\/h3>\n
\"\"
Animated GIF showing the non-wrapping text preventing the flex parent from getting narrower.<\/figcaption><\/figure>\n

Not only might this prevent the narrowing of a container, it might blow a container out super wide.<\/p>\n

Child elements (of the flex child) are the issue<\/h3>\n

Confusing things a bit… if the text at hand is directly within the flex child, things work fine:<\/p>\n

<div class=\"flex-parent\">\r\n  <div class=\"flex-child\">\r\n    Text to truncate here.\r\n  <\/div>\r\n  <div class=\"flex-child\">\r\n    Other stuff.\r\n  <\/div>\r\n<\/div><\/code><\/pre>\n
\/* Text is directly within flex child,\r\n   so doing the wrapping here *\/\r\n.flex-child {\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}<\/code><\/pre>\n
The problem comes up when there are child elements, like:<\/p>\n
<div class=\"flex-parent\">\r\n  <div class=\"flex-child\">\r\n    <h2>Text to truncate here.<\/h2>\r\n  <\/div>\r\n  <div class=\"flex-child\">\r\n    Other stuff.\r\n  <\/div>\r\n<\/div><\/code><\/pre>\n
\/* Text is a header now,\r\n  so need to truncate there for it to work *\/\r\n.flex-child > h2 {\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}<\/code><\/pre>\n
The solution is min-width: 0;<\/code> on the flex child<\/h3>\n
Or min-width<\/code> some actual value. Without this, the flex child containing the other text elements won’t narrow past the “implied width” of those text elements. <\/p>\n
When I first ran into this problem, I found the solution via a Pen by AJ Foster<\/a>. He writes:<\/p>\n
According to a draft spec<\/a>, the above text should not fully collapse when the flex container is resized down. Because .subtitle has a width of 100%, the min-width: auto calculation that flexbox makes says that its container should be larger than we want. <\/p><\/blockquote>\n
I found this behavior consistent across Chrome, Opera, and Firefox. Safari was shrinking\/truncating even without the min-width (against spec, I think).<\/p>\n
Demo<\/h3>\n
See the Pen Thing you gotta know about flexbox<\/a> by Chris Coyier (@chriscoyier<\/a>) on CodePen<\/a>.<\/p>\n
    \n
  1. Works: Text is directly inside flex child<\/li>\n
  2. Broken: Text is in an <h2><\/code> inside flex child<\/li>\n
  3. Works: Text is in <h2><\/code>, but min-width<\/code> set on flex child<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
    Situation: you have a single line of text in a flex child element. You don’t want that text to wrap, […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_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,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4],"tags":[],"class_list":["post-241496","post","type-post","status-publish","format-standard","hentry","category-articles"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":181375,"url":"https:\/\/css-tricks.com\/centering-css-complete-guide\/","url_meta":{"origin":241496,"position":0},"title":"Centering in CSS Guide","author":"Chris Coyier","date":"September 2, 2014","format":false,"excerpt":"Centering things in CSS is the poster child of CSS complaining. Why does it have to be so hard? They jeer. I think the issue isn't that it's difficult to do, but in that there so many different ways of doing it, depending on the situation, it's hard to know\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"A bunch of pink arrows pointing towards the center of the image against an orange background.","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/09\/guide-centering.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/09\/guide-centering.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/09\/guide-centering.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/09\/guide-centering.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/09\/guide-centering.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":341894,"url":"https:\/\/css-tricks.com\/equal-columns-with-flexbox-its-more-complicated-than-you-might-think\/","url_meta":{"origin":241496,"position":1},"title":"Equal Columns With Flexbox: It\u2019s More Complicated Than You Might Think","author":"Kevin Powell","date":"June 10, 2021","format":false,"excerpt":"As awesome as flexbox is, what it\u2019s doing under the hood is actually a little strange because, by default, it is doing two things at once. It first looks at the content size which is what we would get if by declaring width: max-content on an element. But on top\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/three-equal-columns-blueprint.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/three-equal-columns-blueprint.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/three-equal-columns-blueprint.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/three-equal-columns-blueprint.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/three-equal-columns-blueprint.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":165310,"url":"https:\/\/css-tricks.com\/filling-space-last-row-flexbox\/","url_meta":{"origin":241496,"position":2},"title":"Filling the Space in the Last Row with Flexbox","author":"Chris Coyier","date":"March 10, 2014","format":false,"excerpt":"Chris Albrecht posted a question on StackOverflow about grids. Essentially: imagine you have an element with an unknown number of children. Each of those children is some percentage of the width of parent such that they make equal rows, like 25% wide each for four columns, 33.33% wide each for\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":153033,"url":"https:\/\/css-tricks.com\/arranging-elements-top-bottom-instead-left-right-float\/","url_meta":{"origin":241496,"position":3},"title":"Arranging Elements from Top to Bottom instead of Left to Right (float: down?)","author":"Chris Coyier","date":"October 15, 2013","format":false,"excerpt":"Reader Marcin A wrote in with this question about a simple unordered list in which they wanted the elements to be arranged in vertical order (top to bottom) instead of horizontal (left to right). So markup like: 1 2 3 4 5 6 Which would end up like: 1 4\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":325027,"url":"https:\/\/css-tricks.com\/understanding-flex-grow-flex-shrink-and-flex-basis\/","url_meta":{"origin":241496,"position":4},"title":"Understanding flex-grow, flex-shrink, and flex-basis","author":"Robin Rendle","date":"November 10, 2020","format":false,"excerpt":"When you apply a CSS property to an element, there's lots of things going on under the hood. For example, let\u2019s say we have some HTML like this: 
     
    Child<\/div> 
    Child<\/div> 
    Child<\/div> <\/div> And then we write some CSS... .parent { display: flex; } These are\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/guide-flexbox.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/guide-flexbox.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/guide-flexbox.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/guide-flexbox.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/guide-flexbox.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":325791,"url":"https:\/\/css-tricks.com\/grid-auto-flow-css-grid-flex-direction-flexbox\/","url_meta":{"origin":241496,"position":5},"title":"grid-auto-flow : CSS Grid :: flex-direction : Flexbox","author":"Robin Rendle","date":"November 18, 2020","format":false,"excerpt":"When setting a parent element to display: flex, its child elements align left-to-right like this: CodePen Embed Fallback Now, one of the neat things we can do with flexbox is change the direction so that child elements are stacked vertically on top of each other in a column. We can\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/241496","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=241496"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/241496\/revisions"}],"predecessor-version":[{"id":251304,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/241496\/revisions\/251304"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=241496"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=241496"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=241496"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}