如果溢出不起作用，则 fxFlex 和截断跨度答案

【问题标题】：fxFlex and truncate span if overflows is not working如果溢出不起作用，则 fxFlex 和截断跨度
【发布时间】：2020-07-01 13:06:49
【问题描述】：

我的 flex div 有问题，它的跨度在里面。

我希望它在文本溢出时被截断，文本被截断并隐藏溢出，但省略号不显示。

<div fxFlexFill fxLayoutAlign="center center" class="over-line">
    <div fxFlex="0 0 60%" fxLayoutAlign="center center">
       <div class="truncate" fxLayoutAlign="start center">{{ mytext }}</div>
    </div>
</div>

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

在我的研究中，我读到我需要使用 min-width:0 但它不起作用。

根据我的答案，问题是我使用的是跨度，我将其更新为 div，但结果相同

我的问题可能出在哪里？

【问题讨论】：

标签： html css flexbox

【解决方案1】：

Span 是一个内联元素。给出显示块并指定一些值作为宽度

.truncate {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
    width: 50px; 
    display: block;
}

<div fxFlexFill fxLayoutAlign="center center" class="over-line">
    <div fxFlex="0 0 60%" fxLayoutAlign="center center">
       <span class="truncate" fxLayoutAlign="start center">{{mytext}} pakistan</span>
    </div>
</div>

【讨论】：

当我这样做时，我无法将其垂直居中，我该怎么做？
尝试给类名指定高度 40px .truncate 我们使用这个技巧将文本居中 .over-line > div { display:flex;对齐项目：中心；}