javascript - 如果文本溢出则添加缩进

Question

尝试在 hover 上通过 text-indent 溢出时显示 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>