Use text-overflow: ellipsis and flexbox align-items: center in combination

Question

I've got a div, which is a wrapper, and some child div within. I'm using flexbox to position them below each other. Now, the child divs have a text. The text is aligned vertical with align-items: center;. The width of the child div depends of it's text. When the text is as long as the wrapper, the div should stop growing and the text within should got cut of. For this I tried to use text-overflow: ellipsis;. It doesn't work as expected. I know I could use display: inline-block; in case of flexbox, but I would like to use flexbox to align the text in combination with text-overflow: ellipsis; but it seems not to work with my example. At the moment, the item with long text overlaps the wrapper and there is also no ellipsis. The item has an fix height.

The only answer I found for this topic was this one, but the answer didn't help me: Ellipsis in flexbox container

Hope it's clear enough.

.wrapper {
  display: flex;
  flex-direction: column;
  background-color: lightcoral;
  padding: 10px;
  flex-wrap: wrap;
}

.wrapper__item {
  min-width: 0;
  flex-basis: 50%;
  align-self: flex-start;
  flex-direction: row;
  width: auto;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border: 1px solid black;
  border-radius: 5px;
  margin-bottom: 10px;
  background-color: white;
  height: 50px;
}

<div class="wrapper">
  <div class="wrapper__item">Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo eget malesuada. Vivamus suscipit
    tortor eget felis porttitor volutpat. Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec rutrum congue leo eget malesuada. Curabitur arcu
    erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta.</div>

  <div class="wrapper__item">Proin eget tortor ri.</div>

  <div class="wrapper__item">Proin eget tortor ri.Proin eget tortor ri.</div>
</div>

Paediatrician

"Didn't help " how? - be specific! – Gidgetgie

@Gidgetgie I tried the same as in the answer, to put flex-wrap: wrap; on the wrapper and a min-width of 0 and a flex-basis of 50% on the item. The rest is similar to mine. Maybe I did it wrong I don't know... – Paediatrician

Answer 1

text-overflow: ellipsis won't work on flex container (display: flex).

The main reason is that the text node becomes a anonymous flex child and needs min-width: 0 to behave (or else it won't shrink beyond its content size), but as one can't target a text node with CSS, we need to wrap it, here done with a span.

Here's a post that have a great explanation for The Automatic Minimum Size of Flex Items

---

Note 1: The parent overflow is caused by the width + padding, and box-sizing: border-box will fix that.

Note 2: For the align-items: center to have an effect, the item need a height, here given 50px.

Stack snippet

.wrapper {
  display: flex;
  flex-direction: column;
  background-color: lightcoral;
  padding: 10px;
}

.wrapper__item {
  align-self: flex-start;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 5px 10px;
  border: 1px solid black;
  border-radius: 5px;
  margin-bottom: 10px;
  background-color: white;
  height: 50px;
}
.wrapper__item span {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

<div class="wrapper">
  <div class="wrapper__item"><span>Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo eget malesuada. Vivamus suscipit
    tortor eget felis porttitor volutpat. Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec rutrum congue leo eget malesuada. Curabitur arcu
    erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta.</span></div>

  <div class="wrapper__item">Proin eget tortor ri.</div>

  <div class="wrapper__item">Proin eget tortor ri.Proin eget tortor ri.</div>
</div>

Saguaro

This post indicated that it is actually possible to use text-overflow: ellipsis on a flex container. It's just very hard. – Ivonneivor

@PaulRazvanBerg -- That is yet one of my answers, and in that post, the element that has text-overflow: ellipsis; is a flex child, not a flex container. – Saguaro

@PaulRazvanBerg -- The main reason here is as for e.g. a table cell. Flex containers and table cells will by default not be smaller than their content, and in this question, the text node becomes a anonymous flex child and needs min-width to behave, but there's no way to target a text node with CSS, hence the need to wrap it. – Saguaro

@PaulRazvanBerg -- I also updated my answer with a short explanation on what's going on, and linked to a longer one, worth reading. – Saguaro

Answer 2

No need to use display:flex in .wrapper__item class as text-overflow does not not work in flex row.

And for height you can use line-height as your text is in a single line....or you can use both height and line-height

Stack Snippet

body {
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  background-color: lightcoral;
  padding: 10px;
}

.wrapper__item {
  align-self: flex-start;
  flex-direction: row;
  width: auto;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 0px 10px;
  border: 1px solid black;
  border-radius: 5px;
  margin-bottom: 10px;
  background-color: white;
  box-sizing: border-box;
  line-height:50px;
}

<div class="wrapper">
  <div class="wrapper__item">Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo eget malesuada. Vivamus suscipit
    tortor eget felis porttitor volutpat. Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec rutrum congue leo eget malesuada. Curabitur arcu
    erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta.</div>

  <div class="wrapper__item">Proin eget tortor ri.</div>

  <div class="wrapper__item">Proin eget tortor ri.Proin eget tortor ri.</div>
</div>

Loutish

Why is the item overlaping the range of the wrapper in your solution? Seems to be the right way, but not exactly as I need.. – Paediatrician

Forgott to provide an important info: The item has a fixed height! So I need a way how to align the text vertical centered with flexbox and use ellipsis to cut it off. – Paediatrician

@MrBuggy Use line-height:50px instead of height – Loutish

Works also fine, marked the below answer as correct, because there I can use flexbox and ellipsis in combination and that was the topic of the question. But nice alternative solution, if the text within the div isn't in an element. Thanks – Paediatrician