Flexbox and Truncated Text | CSS-Tricks

阅读 124
收藏 8
2018-12-07
原文链接:css-tricks.com

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 make layout easier!

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

#What we want

Animated GIF showing the text truncating as the flex child gets narrower.

#The potential problem

Animated GIF showing the non-wrapping text preventing the flex parent from getting narrower.

Not only might this prevent the narrowing of a container, it might blow a container out super wide.

#Child elements (of the flex child) are the issue

Confusing things a bit... if the text at hand is directly within the flex child, things work fine:

<div class="flex-parent">
  <div class="flex-child">
    Text to truncate here.
  </div>
  <div class="flex-child">
    Other stuff.
  </div>
</div>
/* Text is directly within flex child,
   so doing the wrapping here */
.flex-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

The problem comes up when there are child elements, like:

<div class="flex-parent">
  <div class="flex-child">
    <h2>Text to truncate here.</h2>
  </div>
  <div class="flex-child">
    Other stuff.
  </div>
</div>
 
/* Text is a header now,
  so need to truncate there for it to work */
.flex-child > h2 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
 

#The solution is min-width: 0; on the flex child

Or min-width some actual value. Without this, the flex child containing the other text elements won't narrow past the "implied width" of those text elements.

When I first ran into this problem, I found the solution via a Pen by AJ Foster. He writes:

According to a draft spec, 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.

I found this behavior consistent across Chrome, Opera, and Firefox. Safari was shrinking/truncating even without the min-width (against spec, I think).

#Demo

  1. Works: Text is directly inside flex child
  2. Broken: Text is in an <h2> inside flex child
  3. Works: Text is in <h2>, but min-width set on flex child

#Related

Arranging Elements from Top to Bottom instead of Left to Right (float: down?)

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…

Designing A Product Page Layout with Flexbox

Every day at Shopify I speak with Partners who are constantly pushing the boundaries of what's possible in ecommerce design. Recently, I've noticed a number of designers are experimenting with Flexbox in their stores. As web designers and developers, one of our primary goals is to bring focus to content…

`flex-grow` is weird. Or is it?

The following is a guest post by Manuel Matuzovic. It illustrates how flex-grow works, weird quirks and all. Then he goes into several examples on how common layout patterns may be implemented using flex-grow and flex-basis. When I found out about flex-grow, I made a simple demo to find out…

评论