Trim the text in the float and show it completely when you hover over

Question

I have the 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 what it looks like by default:

What it looks like when you hover over the text (we show the full length of the text):

---

Additional Information:

• I use text ellipsis to truncate text ( see here )
• When the text freezes, we use the selector :hoverto set the position:absoluteparagraph text
• We do not know the width in advance .box-right, nor the width.box-left
• .box width is equal to the width of the window (therefore a variable)

---

Actually, I have this example of working with CSS and Javascript, javascript is to set the width of the element .box-left pto load the page using:

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

---

Question:

• I am wondering if there is only a solution for CSS? I tried with display: table-cellno success.

:

• .box-left,
• ,

Answer 1

:

, . .

FIDDLE

:

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

, , .box-left, 100% , sibling .box-right.