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

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

---

问题:

• 我想知道是否有一个CSS唯一的解决方案？我尝试了

  display:table cell

  ，但没有成功

我想做的是：

• 截断

  .box left

  的文本，使按钮和文本在一行上
• 悬停文本时，显示其全长
演示：
CSS 我们的想法是，当我们将鼠标悬停在

.box left

上时，我们会将父对象的宽度增加到100%，并隐藏它的兄弟对象

。box right

，这样如何：
请注意，我没有设置框的宽度。无论盒子的宽度是多少，它都能工作
标记：

---

“我们事先不知道宽度…”-为什么不知道？我们不能使用百分比吗？悬停时，是要隐藏方框右侧的所有内容，还是只隐藏左侧文本覆盖的部分？棘手的部分是

。方框的宽度是可变的。它可以是600px或任何其他值。我认为你应该将
宽度：100%
添加到
。框左p:hover
，然后我们是金色的（因为它将覆盖任何宽度的所有按钮）：@gvee我不知道OP需要什么。（看我在问题评论中问的问题）@Daneild我知道你的意思，但是如果把一半的按钮都剪掉，看起来有点裤子。。也许在右手边有一个漂亮的
框阴影
，至少可以使边缘光滑一些我们还必须改变HTML流，否则当鼠标悬停在
框左侧时，我们可以将
框设置为右侧
。该死的CSS不允许选择以前的兄弟姐妹
$('.box-left p').css('width', $('.box').innerWidth() - $('.box-right').outerWidth())

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

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

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