CSS使用flex-direction列在flexbox父级中截断文本

Question

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> 

Answer 1

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 :

• Flexbox resize and scrollable overflow

Answer 2

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>