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

小提琴：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;
}

你如何做到这一点将取决于你的最终目标。

Answer 2

只需添加.hover活动

即可

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

jsfiddle

内部跨度中的文本应在带有省略号的div上溢出

2 个答案: