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..

    Push vertically resizable Div to bottom of wrapper. How?

    How to toggle single element with this same class like another

    How to create this CSS border

    How to create a form that flys out onto the screen using javascript/css

    How do I set the background-image property to a linear gradient using jQuery's css method?

    how to override unselectable=“on” with css in IE10?

    How can I select this element?

    How to make 3-Column layout with fluid center (fully utilize space), and variable-length on sidebars

    How to style using d3's .style() method instead of using CSS in style tags for .axis path {}?

    How to remove flexbox default padding/margin/pagemargin?

    How to align an element applying css margins that does not get modified according to browsers and screen resolutions?

    Anyone know how to create CSS rectangle with one corner chopped off?

    How to Dynamically create a CSS class using AngularJS

    How to achieve “paper-like” background effect? [closed]

    How to move some text down in a li tag?

    Show and hide img

    How to reduce the gap between HTML5 video tag

    How do I change CSS submenu width so it doesn't used the same width as the main menu?

    How to add CSS reference link to local HTML files in folder?

    How to set height for elements in a

    How I can overlap a DIV on to other DIV?

    html, css - cursor - how to change default image for pointer

    How to create a 3 columns fluid fixed fluid layout?

    How do I join my list and div using css?

    How to show hidden part of an image which is inside a fixed height div, using just the CSS?

    Show-hide based on two sets of selectors--how to make them work together?

    How to make my .css and .js file work with my html code loaded in a WebView on Android

    Bootstrap: user agent css styles misbehaving how to solve this

    How to use the computer modern font in webpages?

    How to create a circle and a bar that overlap with css?