Question

我想在文本过长时保持隐藏，并在悬停时显示它。

问题是当文本没有溢出时也会触发。如何添加条件“如果文本溢出则执行翻译，如果文本没有溢出则不执行翻译” ？

如果可能的话，我希望使用 css 解决方案而不是 javascript 解决方案，以避免不必要的复杂性（我每次有文字都需要使用它）< / em>。

PS：解决方案可以是 scss 标记。

.case { cursor: pointer; display: flex; width: 10em; height: 3em; overflow: hidden; background-color: #444444; color: white; margin-top: 2em; margin-bottom: 2em; flex-direction: row; align-items: center; } .sp { width: 100%; height: auto; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block; } .case:hover .sp { transition: 1.3s; overflow: inherit; margin-left: -100%; width: auto; text-overflow: inherit; transition-timing-function: linear; }

<div class="case"> <span class="sp">Short text</span> </div> <div class="case"> <span class="sp">Overflowing long text, so long that you can't read it at once!</span> </div>

Answer 1

仅使用CSS即可实现您想要的功能，但解决方案并非超级干净，需要附加的html标记（嵌套div），并且将来可能会中断，但是如果您坚持使用js来实现，则可以看到下面的解决方案：

init_g = tf.global_variables_initializer()
init_l = tf.local_variables_initializer()
with tf.Session() as sess:
    sess.run(init_g)
    sess.run(init_l)

.case {
  cursor: pointer;
  display: flex;
  width: 10em;
  height: 3em;
  overflow: hidden;
  background-color: #444444;
  color: white;
  margin-top: 2em;
  margin-bottom: 2em;
  flex-direction: row;
  align-items: center;
}

.sp {
  flex: 1 0 100%;
  height: auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
}

.case:hover .sp {
  transition: 1.3s;
  overflow: inherit;
  margin-left: -100%;
  text-overflow: inherit;
  transition-timing-function: linear;
}

.case:hover .case-wrapper {
  overflow: visible;
  margin-left: 100%;
  transition: 1.3s;
  transition-timing-function: linear;
}
.case-wrapper {
  text-overflow: inherit;
  overflow: hidden;
  flex: 1 0 100%;
  display: flex;
}

Answer 2

这是一个依靠flexbox技巧的想法，但是您不会使用省略号。唯一的缺点是您需要定义一个较大的宽度，并且一开始的延迟可能很小：

.case {
  cursor: pointer;
  width: 10em;
  height: 3em;
  background-color: #444444;
  color: white;
  margin-bottom: 2em;
  position:relative;
  overflow:hidden;
}

.sp {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  left:0;
  width: 250%; /* big enough */
  display:flex;
  justify-content:flex-end; /* Center to the end to have a left overflow */
  white-space: nowrap;
}
.sp:after {
  content:"";
  margin-left:auto; /* empty element to push content to the left */
}

.case:hover .sp {
  width: 100%; /* decrease the width to 100%*/
  transition:3s linear;
  transition-timing-function: linear;
}

<div class="case">
  <span class="sp">Short text</span>
</div>

<div class="case">
  <span class="sp">Overflowing long text, so long that you can't read it at once!</span>
</div>

要了解正在发生的情况，请添加一些边框和颜色：

.case {
  cursor: pointer;
  width: 10em;
  height: 3em;
  background-color: #444444;
  color: green;
  margin-bottom: 2em;
  position:relative;
}

.sp {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  left:0;
  width: 250%; /* big enough */
  display:flex;
  justify-content:flex-end; /* Center to the end to have a left overflow */
  white-space: nowrap;
  border:2px solid red;
}
.sp:after {
  content:"";
  width:2px;
  background:blue;
  margin-left:auto; /* empty element to push content to the left */
}

.case:hover .sp {
  width: 100%; /* decrease the width to 100%*/
  transition:3s linear;
  transition-timing-function: linear;
}

<div class="case">
  <span class="sp">Short text</span>
</div>

<div class="case">
  <span class="sp">Overflowing long text, so long that you can't read it at once!</span>
</div>

Answer 3

您将需要使用javascript。如果要保持简单，可以执行以下操作（在DOM准备就绪时）：

document.querySelectorAll('.sp').forEach( el => {
  if (el.scrollWidth > el.clientWidth ) el.classList.add('overflows');
})

并按如下所示修改动画选择器：

.case:hover .sp.overflows {

JS将检查所有.sp元素，并在需要时添加overflows类，使其与选择器匹配。

https://codepen.io/anon/pen/OYpPez

条件CSS-悬停-溢出

3 个答案: