html - 跨度内的文本应在带省略号的 div 上溢出

Question

实现省略号后我无法看到我的全文。我想在悬停上看到全文，期待在同一行看到。我尝试这样做但没有运气。

<div class="box">
<div class="box-left">
    <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. Lorem Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. LoremLorem ipsum dolor sit amet.12345</p>x
</div>
</div>

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

fiddle :http://jsfiddle.net/dp6Xs/67/

Answer 1

你应该可以添加

.box-left > p:hover {
  text-overflow: shown;
  overflow: visible;
}

到您的 CSS 并让整行一次可见。但是，这不会扩展 .box 类的宽度，因此背景颜色会溢出。一个快速的解决方案是让您的框的悬停状态成为触发扩展文本的状态。

.box:hover {
  width: auto;
}

.box:hover .box-left p {
  overflow: visible;
  text-overflow: shown;
}

不过，您如何去做取决于您的最终目标。