如果text通过text-indent上的hover溢出，请尝试显示其余$('.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 Invalid datetime "2017-11-07T19:46:57.118Z", expected format Y-m-d\\TH:i:sP.
，那意味着文本溢出，但这种逻辑不起作用。任何想法？
答案 0 :(得分：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>
答案 1 :(得分：0)
删除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>
答案 2 :(得分：0)
另一种方法是使用: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>