Question

我有一个div，根据我的代码，它的内部跨度数不同，我的问题是，有时最后一个跨度不适合该空间，并且所有内容都失去对齐，我想做的是将我的“ truncate”类应用于最后一个元素（如果需要），有一个示例：

<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

检查:last-child伪类。

Answer 2

您可以使用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/预览

如何在需要时截断最后一个元素

2 个答案: