Text-overflow Is Not Working When Using Display:flex

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

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

Solution 2:

You can do something like this

.flex-container {
  display: flex;
}

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

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

Solution 3:

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><divclass="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><divclass="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.

Solution 4:

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

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

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

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

Solution 5:

add below property in css class

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