7

How can I truncate the text below? The min-width: 0; hack doesn't work when flex-direction is set to column. Neither does this answer.

.parent {
  border: 1px solid red;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 300px;
}

.text {
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class="parent">
   <img src="http://placekitten.com/g/200/200" />
  <div class="text">
    Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
  </div>
</div>
kukkuz
  • 41,512
  • 6
  • 59
  • 95
Frank
  • 1,374
  • 2
  • 16
  • 34

2 Answers2

9

When you give align-items: center the text overflows the parent and the width is not constrained and so ellipsis will not appear.

If you remove align-items: center it works because align-items: stretch is the default - but the image get stretched out now:

.parent {
  border: 1px solid red;
  display: flex;
  /*align-items: center;*/
  flex-direction: column;
  width: 300px;
}

.text {
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class="parent">
   <img src="http://placekitten.com/g/200/200" />
  <div class="text">
    Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
  </div>
</div>

Solution

Add width: 100% to the text - see demo below:

.parent {
  border: 1px solid red;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 300px;
}

.text {
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
<div class="parent">
   <img src="http://placekitten.com/g/200/200" />
  <div class="text">
    Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
  </div>
</div>

The min-width: 0; hack doesn't work when flex-direction is set to column.

Note that in min-width: 0 if for overriding the the flex item width as it is auto in the row direction (for column direction you use min-height). See example below for min-height: 0 used in a column flexbox:

kukkuz
  • 41,512
  • 6
  • 59
  • 95
  • 1
    I had a truncated text nested in a column `flexbox`. I added `width: 100%` to every ancestors in the tree and it worked, thanks! – BiasInput Feb 06 '22 at 16:22
1

Replace the display: flex; in Parent Class into display: block and add to img tag the following

.parent {
  border: 1px solid red;
  display: block;
  align-items: center; 
  width: 300px;
}

img{  
    display:block;
    margin:auto;
}
.text {
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 auto;
}
<div class="parent">
   <img src="http://placekitten.com/g/200/200" />
  <div class="text">
    Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
  </div>
</div>
AhmadMM
  • 371
  • 4
  • 16