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

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>

---

这是默认情况下的外观：

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

---

更多信息：

• 我正在使用文本省略号来截断文本（请参见此处）
• 当文本悬停时，我们使用: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

这个怎么样：

请注意，我没有在盒子上设置宽度。无论盒子的宽度是多少，它都会起作用。

小提琴

标记：

<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

演示：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。