Truncate text in floated box and show it entirely when hovering

Question

I have following html:

<div class="box">
  <div class="box-left">
    <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet</p>
  </div>
  <div class="box-right">
    <button>Resource View</button>
    <button>Employee View</button>
    <button>Regular View</button>
  </div> 
</div>

---

Here's how it looks by default:

How it looks when hovering the text (we show full text length):

---

Some more informations:

• I'm using text-ellipsis to truncate text (see here)
• When text is hovered, we're using :hover selector to set position:absolute to text paragraph
• We don't know in advance the width of .box-right, neither the width of .box-left
• .box width equals window's width (so it's variable)

---

Actually, I have this example working with CSS and Javascript, the javascript consists of setting .box-left p's element width on page load, using:

$('.box-left p').css('width', $('.box').innerWidth() - $('.box-right').outerWidth())

---

Question:

• I'm wondering if there's a CSS only solution? I've tried with display: table-cell without success.

What I want to do:

• Truncate text of .box-left to have buttons and text on one line
• When hovering text, show it's full length

Answer 1

How about this:

Notice that I have't set a width on the box. It will work no matter what the width of the box is.

FIDDLE

Markup:

<div class="box">
   <div class="box-right">
        <button>Resource View</button>
        <button>Employee View</button>
        <button>Regular View</button>
  </div>
  <div class="box-left">
    <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet</p>
  </div> 
</div>

CSS

.box
{
  border:1px solid green; 
  white-space: nowrap;
}
.box-left p
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block; 
    min-height: 30px;
}
.box-left p:hover
{
    background: #fff;
    position: relative;
    z-index: 1;
    display: inline-block;
}
.box-right
{
    float: right; 
    display: inline-block; 
}
.box-right button
{
    display: inline-block; 
}

Answer 2

DEMO: http://jsfiddle.net/dp6Xs/

CSS

.box {
    width: 600px;
    height: 2em;
    position: relative;
    background-color: #ddd;
}

.box > div {
    position: absolute;
    height: 100%;
}

.box-left {
    left: 0;
    width: 250px;
}

.box-left > p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.box-right {
    right: 0;
    width: 350px;
}

.box-left:hover {
    width: 100%;
}

.box-left:hover + .box-right {
    display: none;
}

The idea is that when we hover on .box-left we increase the width to 100% of the parent and we hide it's sibling .box-right.