How to prevent rightmost inline element from wrapping or overflowing in CSS?
I give up!
Here's what I'm trying to accomplish:
- The indicator number is displayed inline with the customer's name (I don't want it fixed to the right of the
- 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
itemdiv 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.
Ok I've spent WAY too much time on this.
Possible solution: http://jsfiddle.net/Ws5Ts/17/
- Reverse the order the of text and indicator and then switch the
rtlso 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.
- 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?