CSS: ellipsis in left-aligned text of single line of dynamic width text where width of left-aligned text = 100% - right-aligned text

Question

I need to create a design in which the end user will see a single line of text with two components. The text-align:left div could have any arbitrary length of text. The text-align:right div will generally be about 9 or 10 characters long, but it could conceivably go as high as 20-some characters.

Here's how it needs to appear to end users:

The text-align:left text should use ellipsis to hide any text that doesn't fit on the screen in a single line of text.
The text-align-right text should always be on screen in that same single line.
The width of the text-align:left div should be equal to the width of the browser window less the width of the text-align:right text's div.
The width of the text-align:right div should be equal to the width of the text within it plus its horizontal padding.
The text needs to be vertically centered in the middle of the line.

I almost got this working in a fiddle, but in that I needed to use a fixed width for the text-align:right div. Here's the HTML:

<body>
    <div id="wrap">
        <div id="left">Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left</div>
        <div id="right">Right</div>
    </div>
</body>

and here's the CSS:

* {border:0; margin:0; padding:0;}

html, body {background-color:gray; height:100%; width:100%}

#left, #right {padding:5px;}

#left {
    background-color:red;
    float:left;
    text-align:left;
    width:calc(100% - 120px); /* deducted amount = width of #right + total horizontal padding*/

    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#right {
    background-color:orange;
    float:right;
    text-align:right;
    white-space: nowrap;
    width:100px;
}

I could conceivably jump to JQuery here and have it set the widths of both divs according to the width of the text-align:right div, but I'd really prefer to solve this with CSS if possible.

Previously I tried to use display:table and display:table-cell to make this happen, but I ran into the various problems of using ellipsis with table-cell. Using table-layout:fixed didn't properly display ellipsis, nor did display:block, nor did setting a max-width. I'm happy to use table-cell if that will do it.

So is there a way to do this using purely CSS?

Did you try word-wrap: break-word; and overflow-wrap: break-word; — Vivek Vikranth, Sep 02 '13 at 06:50

Danield · Accepted Answer · 2013-09-02T07:02:43.247

1) Remove float:left from your left div and

2) Add display:block on your left div

and bingo! - the right div takes up only as much space as it needs - without giving it a fixed width anymore.

UPDATED FIDDLE + FIDDLE 2 (just to prove it works)

Markup

<div id="wrap">
        <div id="right">Right</div>
        <div id="left">Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left</div> 
</div>

CSS

#wrap
{
    width: 100%;
}
#left, #right {padding:5px;}

#left {
    background-color:red;
    text-align:left;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#right {
    background-color:orange;
    float:right;
    text-align:right;
    white-space: nowrap;
}

score 0 · Answer 2 · answered Sep 02 '13 at 07:19

0

Embrace the power of Flexbox! This approach allows you to maintain the order of the text as you intended them to appear in your markup (opposed to the float approach above). Here's a fiddle: Fiddle

Polyfills are available for browsers that do not support flexbox.

<body>
    <div id="wrap">
        <div id="left">Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left</div>
        <div id="right">Right Right Right Right</div>
    </div>
</body>

CSS

#wrap {
    display:flex;
    justify-content:space-between;
}

#left,
#right {
    padding:5px;
}

#left {
    background:red;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    flex:1;
}

#right {
    background:orange;
}

answered Sep 02 '13 at 07:19

Jbird

2,839
1
21
28

I just checked out [the flexbox documentation](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes), and it sounds great but IE and Safari support is still poor, and Firefox only supports it after the user flips a preference switch. Is there already a polyfill that would make this work on those browsers as well? – Vincent Sep 03 '13 at 02:19
1

That's the problem with living on the edge ;) Here's a link to the latest support table on [caniuse.com](http://caniuse.com/#feat=flexbox). Safari support is pretty good as long as you use the `-webkit-` prefix. The partial support indicators on Firefox are due to the lack of support for certain properties of the flex box model. In the use above, I've only used the bare `display:flex` property so Firefox will support it. I'll dig around for the best known current polyfill. IE9 would (of course) be the problem child that hopefully a polyfill can address. – Jbird Sep 03 '13 at 15:00
1

Here's an updated [Fiddle](http://jsfiddle.net/ByD9z/3/) that demonstrates the use of the `-webkit-` prefix – Jbird Sep 03 '13 at 15:11
Wow, how have I never seen [caniuse.com](http://www.caniuse.com) before? What a great resource. With IE9 being the problem child it is, I'm guessing IE8 is just going to be hopeless? According to [NetMarketShare](http://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0), it still represents a quarter of all browser use. – Vincent Sep 04 '13 at 04:45
1

Yea that site is great. Use it responsibly though - I look at the tables as a "starting point" for testing, if that makes sense. Anyway, the tricky part about flex box layout is that some developers started creating/implementing polyfills in the infant phases of its W3C recommendation phase and browsers too were implementing the feature differently. As the spec has changed, those old syntaxes are now...'wrong'. Chris Coyier gives a great breakdown of the differences [here](http://css-tricks.com/old-flexbox-and-new-flexbox/) and explains how to identify them. – Jbird Sep 04 '13 at 14:55
1

To answer your question, yes - IE8 is fairly hopeless. However, that doesn't necessarily mean that you are missing the bulk of visitors. You have to consider who is coming to YOUR site. Also, it's a valid approach to use [Modernizr](http://modernizr.com/) to check for flexbox support and provide a jscript fix when it isn't - or simply use an IE conditional to provide an alt stylesheet. This is a "future-proof" approach, as you have implemented a feature based on current standards but provided a fallback for browsers that you will eventually not support. – Jbird Sep 04 '13 at 14:59

CSS: ellipsis in left-aligned text of single line of dynamic width text where width of left-aligned text = 100% - right-aligned text

2 Answers2

Markup

CSS