Menu
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:
text-align:left text should use ellipsis to hide any text that doesn't fit on the screen in a single line of text.text-align-right text should always be on screen in that same single line.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.text-align:right div should be equal to the width of the text within it plus its horizontal padding.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?
605
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)
<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>
#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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
