text-overflow is not working when using display:flex

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/

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>

.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/

Related