CSS: Inline div with min-width that comes after another Div of variable width

Question

I'm trying to get something similar to the following code:

<div class="window-width-container">
    <div class="head">head</div>
    <div class="tail">(tail)</div>

    <div class="head">head head head head head</div>
    <div class="tail">(tail)</div>

    <div class="head">head head head head head head head head head head head head head head head head head head head head head head head head </div>
    <div class="tail">(tail)</div>
</div>

To output:

+------------------------------------+
+head(tail)                          +
+head head head head head(tail)      +
+head head head head head he...(tail)+
+------------------------------------+

Where the following constraints are in place:

The head div has inline-block behavior (i.e. the width is flexible to the content)
The tail div follows immediately after
Both divs fit in one line, with head being ellipsized if it gets too large

I can almost get the behavior working if I use tables instead of divs, but once I use

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

to get that ellipsis behavior, it insteads does overflow and pushes past the bounds of the container div.

Any help would be greatly appreciated!

sorry I misspoke, the container div needs to be 100% width and I don't want to use javascript to figure out the window width — ian, Dec 30 '13 at 23:21
flexible widths and ellipsis are huge problem in css and often don't work as desired. But maybe this will help you: http://stackoverflow.com/questions/12649904/css-text-ellipsis-when-using-variable-width-divs — Neograph734, Dec 30 '13 at 23:28
Unfortunately I am trying to utilize the full 100% if possible. The best example I can show is this: http://jsfiddle.net/yu62p/ however the head spills over into multiple rows and I need it to truncate — ian, Dec 30 '13 at 23:34
That would cause the tail to spill over to the next line though. I need it all to fit on the same line within the 100% space. — ian, Dec 30 '13 at 23:39
you can change the max-width to head to say 90% and specify min-width as 5% to tail depending on your requirement — Raunak Kathuria, Dec 30 '13 at 23:41
That might add the potential for the tail to not be able to fit the full contents. — ian, Dec 30 '13 at 23:45
This -almost- does what I want except I cannot get the ellipsis to work http://jsfiddle.net/Aa6kv/ — ian, Dec 30 '13 at 23:55

Raunak Kathuria · Answer 1 · 2013-12-30T23:43:58.793

HTML

Add wrapper class around head tail

<div class="window-width-container">
    <div class="wrapper">
        <div class="head">head</div>
        <div class="tail">(tail)</div>
    </div>
    <div class="wrapper">
        <div class="head">head head head head head</div>
        <div class="tail">(tail)</div>
    </div>
    <div class="wrapper">
        <div class="head">head head head head head head head head head head head head head head head head head head head head head head head head</div>
        <div class="tail">(tail)</div>
    </div>
</div>

CSS

.window-width-container {
    width: 100%
}
.wrapper {
    flex: 1;
}
.head, .tail {
    display: inline-block;
}
.head {
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tail {
    min-width: 5%;
    overflow: hidden;
}

Check fiddle

CSS: Inline div with min-width that comes after another Div of variable width

1 Answers1