Question

我有一个我设置text-overflow: ellipsis的元素。然后我设置了一个悬停以扩展文本。 CSS中是否有一种方法可以消除扩展文本对其上方或下方元素的影响？

设置文字：

.box h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.box h3:hover {
  text-overflow: initial;
  white-space: normal;
  background-color:blue;
  display: block;
}

CodePen

Answer 1

您明确地将宽度设置为框元素，这就是导致框高度增加的原因。

css正试图用新内容填充这个框，但它不能使框大于横向，所以必须扩展高度。

Answer 2

你可以使它（悬停状态）位置：绝对（在页面中正确定位）和不透明IT在div中具有更高的z-index应该在下面的元素（我现在还不确定是否需要）。

Answer 3

这似乎有预期的效果：http://codepen.io/anon/pen/Xdbvex

将.box设为position:relative，将h3:hover设为position:absolute。

Answer 4

不在当前布局中，当您将新字符悬停时，请填写框，强制它在高度上展开，因为宽度限制不再有明显的房间宽度。

不使用任何javascript，您必须使用绝对定位提升您在dom上悬停的元素。

然而，这会导致其下的元素抬起您不想要的页面。

没有javascript这是一个棘手的问题，如果没有在屏幕上重复内容，我就无法想到这种方式。但这有效，可以通过一些整理来实现：）

* {
  margin: 0px;
  padding: 0px;
}
.box {
  width: 170px;
}
.wrapper {
  position: relative;
}
.box h3 {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.hidden {
  display: none;
}
.wrapper:hover > .hidden {
  display: block;
  color: white;
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  width: 100%;
  background-color: blue;
}

<div class="box">
  <div class="wrapper">
    <h3>Really long text that will wrap</h3>
    <div class="hidden">Really long text that will wrap</div>
  </div>
  <h2>Text Below its dfg asdrg sdh zxdh xcgh .</h2>
</div>

将鼠标悬停在缩短的文本上以扩展而不会影响周围的元素

4 个答案: