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
– Vivek Vikranth, Commented Sep 2, 2013 at 6:50

Danield · Accepted Answer · 2013-09-02 07:02:43Z

7

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;
}

edited Sep 2, 2013 at 7:02

answered Sep 2, 2013 at 6:54

Danield

127k37 gold badges235 silver badges267 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vincent Over a year ago

Bingo indeed! Thanks!

Jbird · Accepted Answer · 2013-09-02 07:19:25Z

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 2, 2013 at 7:19

Jbird

2,9061 gold badge24 silver badges29 bronze badges

6 Comments

Vincent Over a year ago

I just checked out the flexbox documentation, 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?

Jbird Over a year ago

That's the problem with living on the edge ;) Here's a link to the latest support table on caniuse.com. 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 Over a year ago

Here's an updated Fiddle that demonstrates the use of the -webkit- prefix

Jbird Over a year ago

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 and explains how to identify them.

Jbird Over a year ago

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

|

Collectives™ on Stack Overflow

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

2 Answers 2

Markup

CSS

1 Comment

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Markup

CSS

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related