ellipsis not working on bootstrap with flex - css

Question

I am trying to add ellipsis after 2 lines of icons, the HTML is below. I tried various combinations by going through many pages. Like changing min-width to 0 and others. All the efforts seem to be useless by now. Hence I turned out for some expert eyes on this, please have a look
.ellipsis {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.gicon{
background-repeat:no-repeat;
background-position: center center;
background-size: auto 100%;
height: 32px;
width: 32px;
align-self: center;
}
<div class="row facilityRow">
<div class="col d-flex align-content-start flex-wrap ellipsis">
<div class="d-flex flex-column mr-3">
<i class="gicon" path="001-meditation" rel="tooltip" data-toggle="tooltip" data-placement="top" title="Mediation"></i>
<small>Mediation</small>
</div>
<div class="d-flex flex-column mr-3">
<i class="gicon" path="003-yoga" rel="tooltip" data-toggle="tooltip" data-placement="top" title="Yoga"></i>
<small>Yoga</small>
</div>
</div>
</div>

Answer 1

At first, don't use small. Use an element that does not format text, for example, p.
You need to restirct its immediate parent's width. If there is enough space on the x-axis, it does not work.
.ellipsis {
width: 100%;
max-width: 32px;
}
.ellipsis p {
overflow: hidden;
text-overflow: ellipsis;
}
<div class="row facilityRow">
<div class="col d-flex align-content-start flex-wrap">
<div class="d-flex flex-column mr-3">
<i class="gicon" path="001-meditation" rel="tooltip" data-toggle="tooltip" data-placement="top" title="Mediation"></i>
<div class="ellipsis">
<p>Mediation</p>
</div>
</div>
<div class="d-flex mr-3">
<i class="gicon" path="003-yoga" rel="tooltip" data-toggle="tooltip" data-placement="top" title="Yoga"></i>
<div class="ellipsis">
<p>Yoga</p>
</div>
</div>
</div>
</div>