text-overflow is not working when using display:flex
.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.
TIA
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>