Css 将最后两个元素包装在一起

我有一个动态生成的UL/LI列表，其中包含可变数量的元素，水平显示。我想设置我的CSS，这样如果需要包装，列表中的最后两个元素总是包装在一起

标记：

<ul>
<li>A</li>
<li>B</li>
...
</ul>

列表使用的空间是响应性的，元素是动态的，所以没有固定宽度的东西会有帮助。我无法控制标记，因为它来自CMS。我的列表项当前处于浮动状态，但更改为flex或inline块也可以

---

这在纯CSS中可能吗？

使用flex wrap属性，它将自动调整间距

ul{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

---

这在CSS中是可能的

将

ul

的最小宽度设置为最后两个元素所需的空间

将倒数第二个

li

的右边距设置为等于最后一个

li

的宽度

将最后一个

li

的左边距设置为其宽度的负数

CSS：

ul {
  min-width: 4em;
}

li {
  float: left;
  width: 2em;
}

li:nth-last-of-type(2) {
  margin-right: 2em;
}

li:nth-last-of-type(1) {
  margin-left: -2em;
}

---

您能告诉我们列表的标记是什么样的吗？你是如何生成它的？你完全可以用JS来实现这一点，例如：

A B C D e F g

，然后

$（'p.nobreak'）.each（function（）{$（this）.html（$（this）.html（）.replace（/\s+（\s+$/，'1'）））

我想我很清楚，但是可以肯定的是：它只是从CMS中生成的一个

• A
• B
。

我不认为使用CSS可以实现这一点，因为您使用的是标记。我认为CSS没有帮助解决您的问题，使用JS并计算所有对象的宽度(（我不认为这将满足OP的要求，即最后两件物品必须包装在一起。这不允许最后一件物品的宽度是动态的……但我印象非常深刻！如果没有人能弄明白（我真的不确定这是否可能），那么我将接受这个。对不起，没有注意到你的“没有固定宽度”标准。如果不知道最后两个元素的宽度，我认为在CSS中是不可能的，但使用JavaScript可以很容易地获得。我接受这一点，因为我认为这是CSS可能获得的最接近的结果，但值得添加另一条注释，因为它不能100%回答问题。这个解决方案非常有效，甚至是动态的ally，只要你能控制最后一个元素的最大宽度。高估最后一个元素的宽度的唯一真正惩罚是它比预期的更早中断，ad使右对齐整个列表变得不可取。如果你控制列表的最小宽度，则不需要知道从第二个到最后一个元素的宽度。（我正在使用媒体查询）再次感谢。