Cut text on left side inside button while centering - html

Question

I need to have a button with a text (f.e. "add to basket") which is fluid in width. If the button width is too little to show "add to basket" it must cut to "basket" only.
I did achieve most of it by splitting
<span class="text">add to basket</span>
into two parts and reverse order them in dom
<span class="text">basket</span><span class="text text-prefix">add to </span>
and then show them in the correct order by adding
.text{
float: right;
}
However, the text inside the button must also be centered, which does not work so far.
Here is my fiddle, I'd appreciate any ideas: https://jsfiddle.net/5cavrrhc/
Under all circumstances, I want to avoid using JS for this.
Solution
Ok, here we go: https://jsfiddle.net/6etabchg/4/

Answer 1

Ok, my co-worker and I found a solution that works nicely.
make the button position: relative
make the wrapper display: flex; flex-wrap: wrap-reverse; justify-content: center; to reverse the order
make both inner spans display: inline-block;flex-shrink: 0;
make the one span that should remain order: 2
Working example: https://jsfiddle.net/6etabchg/8/
In addition to what we asked above, we needed a symbol before the text, shown as a square red in the example.