javascript - 获取一行中最后的浮动元素

问题描述

问 题

需求如下：使用|分割文本，每行末尾不显示|
譬如：
假日海岛 | 温泉之旅 | 踏青
赏花 | 滑雪 | 蜜月 | 人文
小长假

以下是我想出来的方法，那么是否还有更加优秀的方法呢？
JS遍历所有元素，用元素的顶部与父元素顶部的距离分组，然后取得每组中左侧与父元素左侧偏移距离中最大者，去除|。

解决方案

其實 css 就可以實現了，用 偽類 和 + 選擇器

<div class="group">
    <span class="item">AAA</span>
    <span class="item">BBB</span>
    <span class="item">CCC</span>
</div>

.item+.item:before {
  content: '|';
}

這個意思是指：當 當前元素(.item) 前面有 (.item)元素 時，就在前面插入一個 |
所以第一個不會有，因為前面沒元素
而最後一個也沒有，因為是插入在前面

補充一個 :not 選擇器的用法，可讀性較佳：

.item:not(:first-child):before {
  content: '|';
}

这篇关于javascript - 获取一行中最后的浮动元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！