时间戳

首页 > 解决方案 > 如果溢出不起作用，则 fxFlex 和截断跨度

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

问题描述

我的 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，但结果相同

我的问题在哪里？

标签： htmlcssflexbox

解决方案

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>

推荐阅读