html - Cut text on left side inside button while centering -

i need have button text (f.e. "add basket") fluid in width. if button width little show "add basket" must cut "basket" only. did achieve of splitting

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

into 2 parts , reverse order them in dom

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

and show them in correct order adding

.text{    float: right; }

however, text inside button must centered, not work far.

here fiddle, i'd appreciate ideas: https://jsfiddle.net/5cavrrhc/

under circumstances, want avoid using js this.

solution

ok, here go: https://jsfiddle.net/6etabchg/4/

ok, co-worker , found solution works nicely.

make button position: relative
make wrapper display: flex; flex-wrap: wrap-reverse; justify-content: center; reverse order
make both inner spans display: inline-block;flex-shrink: 0;
make 1 span should remain order: 2

in addition asked above, needed symbol before text, shown square red in example.

EXIT