Текст выделения при наведении только при переполнении

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

Я также загрузил его на скрипку: https://jsfiddle.net/ydt46n1u/4/

В приведенном выше примере, как я могу остановить выделение для второго div?

Answer 1

.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 2

это лучшая версия, я полагаю, надеюсь, что она будет полезна

$(".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>

Answer 3

Добавить min-width:200px к .labelContainer:hover span

Проблема в том, что, когда width равен auto, диапазон становится меньше контейнера.

Больше нет.