html - p 标签悬停显示隐藏文本将改变下一个元素的位置

Question

我对 text-overflow 的属性有疑问, 这是我的 jsfiddle

我想做的是当我将鼠标悬停在 p 上时标签，它会显示剩余的文本，就像在演示中一样，我不想要 <span> 的位置被改变，这意味着我不想<span>被推回去，没关系<span>当我悬停时被文本覆盖。

我用了position:absolute对于 <span>但它似乎很糟糕practice

Answer 1

position: absolute 是获得的方式，但是您需要一个包装元素 (DIV)，它具有 position: relative(每行单独)。按照下面的代码片段添加适当的位置设置。要覆盖 span，请使用 z-index: -1(与 position: absolute 结合)让它在下 展开的 p 元素。

.wrap {
  position: relative;
  padding: 0;
  margin: 0;
}

p {
  width: 200px;
  border: solid black 1px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0;
}

span {
  position: absolute;
  left: 210px;
  top: 0;
  z-index: -1;
}

p:hover {
  overflow: visible;
  white-space: normal;
  width: auto;
  background-color: #FFF;
}

<div class="wrap">
  <p class='p'>this is a simple paragraph that is meant to be nice and easy to type which</p>
  <span>test</span>
</div>
<div class="wrap">
  <p class='p'>this is a simple paragraph that is meant to be nice and easy to type whichthis is a simple paragraph that is meant to be nice and easy to type which </p>
  <span>test</span>
</div>
<div class="wrap">
  <p class='p'>this is a simple paragraph that is h</p>
  <span>test</span>
</div>
<div class="wrap">
  <p class='p'>this is a simple paragraph that is meant to be nice and this is a simple paragraph that is meant to be nice and easy to type whichh</p>
  <span>test</span>
</div>