如果文本溢出，则添加缩进

Question

如果它通过text-indent溢出hover，尝试显示text的其余部分，这是我到目前为止尝试过的：

$('.all-items').each(function() {
  var indentSize = '-' + $(this).width + 'px';
  $(this).on('mouseenter', function() {
    console.log('a width:' + $(this).find('a').innerWidth());
    console.log('li width:' + $(this).innerWidth());
    if ($(this).find('a').innerWidth() > $(this).innerWidth()) {
      $(this).css('textIndent', indentSize);
    }
  });
  $(this).on('mouseout', function() {
    if ($(this).find('a').innerWidth() > $(this).innerWidth()) {
      $(this).css('textIndent', '0px');
    }
  });
});

.all-items {
  color: black;
  border: 1px solid black;
  margin: 5px;
  padding: 5px;
  width: 30%;
  text-align: center;
  float: right;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  transition: .3s background ease;
  transition: .3s color ease;
  transition: 3s text-indent ease;
  text-overflow: ellipsis;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="first-level all-items" data-val="1"><a style="text-indent: 0px;">Easiest way to keep your customers in the loop about your product</a></li>
  <li class="first-level all-items" data-val="1"><a style="text-indent: 0px;">Easiest way to keep your customers in the loop about your product</a></li>
  <li class="first-level all-items" data-val="1"><a style="text-indent: 0px;">Easiest way to keep your customers in the loop about your product</a></li>
  <li class="first-level all-items" data-val="1"><a style="text-indent: 0px;">Easiest way</a></li>
  <li class="first-level all-items" data-val="1"><a style="text-indent: 0px;">Easiest way to keep your customers in the loop about your product</a></li>
  <li class="first-level all-items" data-val="1"><a style="text-indent: 0px;">Easiest way to keep your customers in the loop about your product</a></li>
</ul>

逻辑是，如果a width高于li width则意味着文本溢出，但此逻辑不起作用。 知道吗？

Answer 1

不确定这是否是你所追求的？

$('.all-items').each(function() {
  var li = $(this),
    link = li.children('a').eq(0),
    liWidth = li.width(),
    linkWidth = link.width();
  if (linkWidth > liWidth) {
    var width = liWidth - linkWidth - 5; // get indent distance (added 5 for safety)
    link.data('width', width + 'px');
    li.on('mouseenter', function() {
      link.css('text-indent', link.data('width'));
    });
    li.on('mouseleave', function() {
      link.css('text-indent', 0);
    });
  }
});

.all-items {
  color: black;
  border: 1px solid black;
  margin: 5px;
  padding: 5px;
  width: 30%;
  text-align: center;
  float: right;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
}
.all-items>a {
  display: inline-block;
  transition: .3s background ease;
  transition: .3s color ease;
  transition: 3s text-indent ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="first-level all-items" data-val="1"><a style="text-indent: 0px;">Easiest way to keep your customers in the loop about your product</a></li>
  <li class="first-level all-items" data-val="1"><a style="text-indent: 0px;">Easiest way to keep your customers in the loop about your product</a></li>
  <li class="first-level all-items" data-val="1"><a style="text-indent: 0px;">Easiest way to keep your customers in the loop about your product</a></li>
  <li class="first-level all-items" data-val="1"><a style="text-indent: 0px;">Easiest way</a></li>
  <li class="first-level all-items" data-val="1"><a style="text-indent: 0px;">Easiest way to keep your customers in the loop about your product</a></li>
  <li class="first-level all-items" data-val="1"><a style="text-indent: 0px;">Easiest way to keep your customers in the loop about your product</a></li>
</ul>

Answer 2

删除each循环并将$(this).width更改为$(this).width()

  $('.all-items').on('mouseover', function() {
    var indentSize = $(this).width() + 'px';
    console.log('a width:' + $(this).find('a').innerWidth());
    console.log('li width:' + $(this).innerWidth());
    $(this).css('textIndent', indentSize);
    if ($(this).find('a').innerWidth() > $(this).innerWidth()) {
          $(this).css('textIndent', indentSize);
    }
  });
  $('.all-items').on('mouseout', function() {
    if ($(this).find('a').innerWidth() > $(this).innerWidth()) {
      $(this).css('textIndent', '0px');
    }
  });

.all-items {
  color: black;
  border: 1px solid black;
  margin: 5px;
  padding: 5px;
  width: 30%;
  text-align: center;
  float: right;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  transition: .3s background ease;
  transition: .3s color ease;
  transition: 3s text-indent ease;
  text-overflow: ellipsis;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="first-level all-items" data-val="1"><a style="text-indent: 0px;">Easiest way to keep your customers in the loop about your product</a></li>
  <li class="first-level all-items" data-val="1"><a style="text-indent: 0px;">Easiest way to keep your customers in the loop about your product</a></li>
  <li class="first-level all-items" data-val="1"><a style="text-indent: 0px;">Easiest way to keep your customers in the loop about your product</a></li>
  <li class="first-level all-items" data-val="1"><a style="text-indent: 0px;">Easiest way</a></li>
  <li class="first-level all-items" data-val="1"><a style="text-indent: 0px;">Easiest way to keep your customers in the loop about your product</a></li>
  <li class="first-level all-items" data-val="1"><a style="text-indent: 0px;">Easiest way to keep your customers in the loop about your product</a></li>
</ul>

Answer 3

另一种方法是在:hover上显示元素position: absolute

ul {
  border: 1px solid green;
  width: 5em;
  padding: 0;
  margin: 0;
}
li {
  width: 100%;
  height: 1.4em;
  list-style-type: none;
}
span {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  background-color: pink;
  display: block;
}
span:hover {
  position: absolute;
}

<ul>
<li><span>Testing long long long line</span></li>
<li><span>Another long long text</span></li>
</ul>