在居中的同时在按钮内侧切割文本

Question

我需要一个带有文字的按钮（f.e。“添加到购物篮”），它的宽度是流动的。如果按钮宽度太小而无法显示“添加到篮子”，则必须仅切换到“篮子”。 我通过分裂

完成了大部分工作

<span class="text">add to basket</span>

分成两部分并在dom中反向排序

<span class="text">basket</span><span class="text text-prefix">add to&nbsp;</span>

然后通过添加

以正确的顺序显示它们

.text{
   float: right;
}

但是，按钮内的文本也必须居中，到目前为止无效。

这是我的小提琴，我很感激任何想法：https://jsfiddle.net/5cavrrhc/

在任何情况下，我都希望避免使用JS。

解决方案

好的，我们走了：https://jsfiddle.net/6etabchg/4/

Answer 1

好的，我和我的同事找到了一个效果很好的解决方案。

1. 按下按钮position: relative
2. 使包装器display: flex; flex-wrap: wrap-reverse; justify-content: center;颠倒顺序
3. 同时制作内跨display: inline-block;flex-shrink: 0;
4. 制作应保持order: 2
的一个范围

工作示例：https://jsfiddle.net/6etabchg/8/

除了我们上面提到的内容之外，我们在文本前需要一个符号，在示例中显示为方形红色。