CSS で、自動折返しとなった要素をセレクターで指定する方法はあるでしょうか？

前提・実現したいこと

「A | B | C」

などと区切りを設けて要素を並べたとき、幅が縮まったときに改行が入ってしまい、

「A | B |
 C」

のようになってしまうことがあります。

このとき、自動折返しの対象となった B をセレクターで選択できれば不要な「｜」を取ることができます。

自動改行された要素を取得する方法はあるでしょうか？

該当のソースコード

html
1<style>
2ul {
3  display:flex;
4  flex-wrap: wrap;
5}
6li {
7  border-right: 1px solid gray;
8}
9li:last-child {
10  border-right: none;
11}
12</style>
13<ul>
14  <li>A</li>
15  <li>B</li>
16  <li>C</li>
17</ul>

行動規範の内容に同意します

回答1件

ベストアンサー

CSSでは難しいと思います。

gap を区切り線代わりに使う方法ぐらいしか思いつきませんでした。
サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/10pomu2c/

css
1ul {
2  display:flex;
3  flex-wrap: wrap;
4  gap: 0 1px;
5  background: gray;
6}
7
8li {
9/*  border-right: 1px solid gray; */
10  background: white;
11  width: 200px;
12  flex: 1 1 auto;
13}