如何防止最右边的内联元素在CSS中包装或溢出？

Question

I give up!

Here's what I'm trying to accomplish:

Fiddle : http://jsfiddle.net/Ws5Ts/1/

Desired behavior :

1. The indicator number is displayed inline with the customer's name (I don't want it fixed to the right of the item div)
2. When the window is resized or if the customer has a very long name the indicator should NOT overflow, but stay at the right side of the item div while the customer's name overflows

I've been at this for the past two hours trying to use all different kinds of wrapping divs with different positioning but I can't get anything to work exactly how I want it to.

Thanks!

Answer 1

How about putting the indicator outside your current div? Just made a really quick example of what I mean here: http://jsfiddle.net/Ws5Ts/3/

My classes aren't very performance correct, but I'm off to bed :)

'

edit: See my comment about margin-left if that suits your layout better

Answer 2

Ok I've spent WAY too much time on this.

Possible solution : http://jsfiddle.net/Ws5Ts/17/

Approach:

1. Reverse the order the of text and indicator and then switch the direction to rtl so that the text overflows to the left. This keeps the indicator where I want it but the text is now overflowing in the wrong direction.
2. Make the overflowing text hidden and use it as a spacer. Set the duplicate visible absolute-positioned text within a container that has a margin to account for the indicator and set nowrap, hidden overflow and text-overflow on that container.

This seems to work in Chrome, Firefox, Safari and IE9.

Anyone else have a less convoluted approach?