text-overflow is not working when using display:flex

Question

.flex-container {
  display: flex;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: left;
}

<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
  ThisIsASampleText
</div>

Output: ThisIsASamp  
Expected: ThisIsASam...

When i remove the flex property it is working fine.

I would like to know why the flex affect the ellipsis.

Tellurian

Answer 1

Your problem here is the lack of "flex-children". These would need to contain the styles to truncate an element, not the parent container.

Try moving the truncate properties to a separate .flex-child class like so:

.flex-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Source and detailed explanation: https://css-tricks.com/flexbox-truncated-text/

Mensch

Answer 2

In your configuration you are having an anonymous block container flex item that contain your text (You may refer to the specificiation for this). The flex item will obey to the min-width constraint thus it will not shrink but will overflow and since it's an anonymous block you have no way to apply min-width to it.

In addition to this, the overflow properties need to be applied to the flex item and not the flex container since this one contain the text and the overflow property aren't inherited. In other words, when using flexbox, you will have two levels: the flex container and the flex items. You need to apply everything to the flex item.

Suppose we add a span around our text we will have this:

.flex-container {
  display: flex;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: left;
}

<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
  <span>ThisIsASampleText</span>
</div>

Now we are able to target the flex item in order to add min-width:0 and the needed properties in order to have the expected output:

.flex-container {
  display: flex;
  text-align: left;
}

span {
  min-width:0;
  text-overflow: ellipsis;
  overflow: hidden;
}

<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
  <span>ThisIsASampleText</span>
</div>

Without the extra wrapper, we cannot target our flex item and applying the properties to the flex container will do nothing.

Ecclesiasticus

Answer 3

You can do something like this

.flex-container {
  display: flex;
}

.flex-container p {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
<p>
  ThisIsASampleText </p>
</div>

Mecke

Answer 4

.flex-container {
  display: flex;
  text-align: left;
}

.text-container {
   min-width: 0;
   text-overflow: ellipsis;
   overflow: hidden;
}

<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
    <div class="text-container">ThisIsASampleText</div>
</div>

https://web.archive.org/web/20170801095151/https://brainlessdeveloper.com/2017/07/29/why-wont-my-text-overflow/

Witherite

Answer 5

add below property in css class

white-space: nowrap;
word-break: break-word;

Complacence