fxFlex и усечение span, если переполнение не работает

Question

У меня проблема с моим модулем 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, но результат тот же

где может быть моя проблема?

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