在浮动框中截断文本并在悬停时完全显示它

Question

我有以下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>

---

以下是默认情况下的显示方式：

悬停文本时的外观（我们显示全文长度）：

---

更多信息：

• 我正在使用文本省略号截断文字（see here）
• 当文字悬停时，我们正在使用:hover选择器将position:absolute设置为文字段落
• 我们事先并不知道.box-right的宽度，.box-left的宽度
• .box宽度等于窗口的宽度（因此它是可变的）

---

实际上，我有这个使用CSS和Javascript的例子，javascript包括在页面加载时设置.box-left p的元素宽度，使用：

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

---

问题：

• 我想知道是否只有CSS解决方案？我试过display: table-cell没有成功。

我想做什么：

• 截断.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％，然后隐藏它的兄弟.box-right。