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

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

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

阅读 2.6k
2 个回答

其實 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: '|';
}

我有个想法,可以把|加在文字的前面,然后用margin-left将文本左移,遮住每行最开始的线

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题