仅当溢出时悬停字幕文本

Question

如果文本不适合其父组件，我想在悬停时将其设为选取框，否则它不应悬停。

当用户将鼠标悬停在文本上时，我可以选取框或滚动文本，但我想设置溢出条件。

这是我的示例代码：

<div class="labelContainer">
  <span>The long text should scroll when user hovers on it.</span>
</div>

<div class="labelContainer">
  <span>Should Not Scroll</span>
</div>

.labelContainer {
  height: 30px;
  border: 1px solid #000;
  border-radius: 3px;
  border-radius: 3px;
  display: flex;
  width: 200px;
  overflow: hidden;
  position: relative;
  padding : 5px;
}

.labelContainer span {
  height: 30px;
  width: 200px;
  color: #000;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  transform: translateX(0);
  transition: 1s;
}

.labelContainer:hover span {
  width: auto;
  transform: translateX(calc(200px - 100%));
}

我也上传到 fiddle : https://jsfiddle.net/ydt46n1u/4/

在上面的例子中，我怎样才能停止第二个 div 的选取框？

Answer 1

将 min-width:200px 添加到 .labelContainer:hover span

当 width 为 auto 时，跨度变得比容器小的问题。

不会了。

Answer 2

.labelContainer {
  height: 30px;
  border: 1px solid #000;
  border-radius: 3px;
  border-radius: 3px;
  display: flex;
  width: 200px;
  overflow: hidden;
  position: relative;
  padding : 5px;
}

.labelContainer span {
  height: 30px;
  width: 200px;
  color: #000;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  transform: translateX(0);
  transition: 1s;
}

.labelContainer:first-of-type:hover span {
  width: auto;
  transform: translateX(calc(200px - 100%));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="labelContainer">
  <span>The long text should scroll when user hovers on it.</span>
</div>

<div class="labelContainer">
  <span>Should Not Scroll</span>
</div>

Answer 3

我认为这是更好的版本，希望它有用

$(".labelContainer span").each(function() {
         var lengthVal=($(this).text().length);
          if(lengthVal>26){
          $(".labelContainer span").addClass("makeit");
          }
     });

.labelContainer {
  height: 30px;
  border: 1px solid #000;
  border-radius: 3px;
  border-radius: 3px;
  display: flex;
  width: 200px;
  overflow: hidden;
  position: relative;
  padding : 5px;
}

.labelContainer span {
  height: 30px;
  width: 200px;
  color: #000;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  transform: translateX(0);
  transition: 1s;
}

span.makeit:hover {
    width: auto;
    transform: translateX(calc(200px - 100%));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="labelContainer">
  <span>The long text should scroll when user hovers on it.</span>
</div>

<div class="labelContainer">
  <span>Should Not Scroll Should Noy</span>
</div>
<div class="labelContainer">
  <span>The long text should scroll when user hovers on it.</span>
</div>
<div class="labelContainer">
  <span>The  scroll when user hovers on it.</span>
</div>

仅当溢出时悬停字幕文本

Marquee text on hover only when overflow

html

javascript

css

marquee

hover