How to prevent rightmost inline element from wrapping or overflowing in CSS?


Tags: html,css

Problem :

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!



Solution :

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?


    CSS Howto..

    How to edit the CSS of a td element through the hierarchy?

    In IE6, how to implement a:hover?

    How to make the gradient border stay at the screen

    How can I adjust the margins of quote symbols added with CSS

    How can i use the visibility attribute in css to make my submenu appear and reappear?

    How can I make my an image?

    How to reset tag in CSS

    How to trigger self hover on child element

    How to wrap two spans into one line with CSS

    How to highlight the menu item in menu

    How to ensure broswer does not cache my JS/CSS [duplicate]

    How to use the word-wrap property in CSS 2.1 and validate CSS

    CSS: How to center text with surrounding borders

    How to control the CSS of the contents that loaded dynamically into iframe?

    how to make list view of show type given below?

    How to re-use .less and generated CSS across projects?

    How to align both these elements in same line?

    How to make a Floating Nav bar? [closed]

    How to edit CSS class via jQuery if statement

    How can I count CSS page breaks for printed HTML?

    How to set absolute css path as in jsp

    jQuery toggle slides DIV up and down, but UL content animates left to right. How can I make the content slide up and down?

    How to create css classes which are “stronger” that elements?

    how to position several div tags over each other

    Why css3 slideshow does not work

    How do I apply css to second level menu items?

    How to change css style value using php in a for loop?

    How to share CSS StyleSheet amongst projects?

    How to use SVG fragment identifier for CSS background image on iOS?

    How to create a separated menu with logo in between