<分区>
我有 list :
<section class="last-content">
<ul>
<li>
<img src="temp/person-1.png" alt="">
<span class="name">Natali</span>
<span class="post">director</span>
<span class="text">Text text text text text text text text text text text </span>
<a href="#?" class="more">more</a>
</li>
</ul>
</section>
几个元素(li)。
默认代码 jquery:
$(".last-content .text").each(function(a){
len=$(this).text().length;
if(len>107)
{
$(this).text($(this).text().substr(0,107)+'...');
}
});
$('.last-content ul li').on('hover', function() {
.......???
.text must be full
});
此代码使文本选择器 (.text) 变短。
在函数“悬停”之后必须做一个全文选择器(.text)。
怎么做？ 谢谢。
最佳答案
不要这样!
首先，当你替换元素的文本内容时，你失去了原来的引用。您必须以某种方式进行存储才能将其恢复原状。
但是 css 有一个特性，当文本溢出指定的大小时，会添加 (...)，像这样:
span.text:not(:hover) {
display: inline-block;
white-space: nowrap;
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
}<section class="last-content">
<ul>
<li>
<img src="temp/person-1.png" alt="">
<span class="name">Natali</span>
<span class="post">director</span>
<span class="text">Text text text text text text text text text text text </span>
<a href="#?" class="more">more</a>
</li>
</ul>
</section>关于jquery - 在悬停时取消 substr，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28329039/
相关文章：
javascript - 使用 typeahead.js 搜索数据并使用 ajax 检索？
html - Controller 和函数如何使用 .emit 在两个单独的文件之间进行通信，以及如何在 AngularJS 中告诉 Controller 层次结构？
html - 响应式内容+侧边栏 : min-width for sidebar breaks in new line
javascript - flask 形式和javascript
javascript - 当循环 DOM 时，如何检查是否到达了 body 元素？