省略号不工作的引导与flex

Question

我试图在2行图标后添加省略号，HTML在下面。我翻阅了很多页，尝试了各种组合。比如将min-width设置为0等。到目前为止，所有的努力似乎都白费了。因此，我找到了一些专家的眼睛，请看看

.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

首先，不要使用small。使用不格式化文本的元素，例如p。

你需要限制它的直接父元素的宽度。如果在x轴上有足够的空间

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