как обрезать последний элемент при необходимости

Question

У меня есть div с различным числом span внутри, в зависимости от моего кода, моя проблема в том, что иногда последний span не помещается в пространство, и все теряет выравнивание, что я хочу сделать, это применить мой класс "усечь" к последний элемент, если необходимо, есть пример:

<div class="truncate">
   <span> ONE </span>
   <span> TWO </span>
   <span> THREE </span>
   <span> FOUR </span>
</div>

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

с этой конфигурацией, а также с применением «усечения», все перемещено влево, и я перестаю смотреть «один» вместо «четыре», как хочу, либо «...» не отображаются.

Я также попытался применить усечение до последнего ребенка с тем же результатом:

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

Где моя ошибка?

Answer 1

Вы можете использовать css :last-child Селектор

.truncate span:last-child {
	display:none; visibility:hidden;
}

<div class="truncate">
   <span> ONE </span>
   <span> TWO </span>
   <span> THREE </span>
   <span> FOUR </span>
</div>

Предварительный просмотр на https://jsfiddle.net/itsselvam/yt9srxLo/

Answer 2

Проверьте псевдокласс : last-child .