Question

我有清单：

<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）缩短。

功能＆＃34; hover＆＃34;必须做一个全文选择器（.text）。

怎么做？感谢。

Answer 1

不要这样做！

首先，当您替换元素的文本内容时，您将丢失原始引用。你不得不以某种方式存储以便重新恢复它。

但是css有一个功能，意味着当文本溢出指定大小时添加（...），如下所示：

＆＃13;

span.text:not(:hover) {
  display: inline-block;
  white-space: nowrap;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
}

＆＃13;

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

＆＃13;

Answer 2

如果您要存储大量文本，也可以不使用substr（），而是使用剪切部分替换剪切部分并隐藏该范围，这样当您执行悬停时，可以显示范围。

例如：

<span class="text">Text too long_bla bla</span>

将是

<span class='text'> Text to...<span class='cut'>o long bla bla </span></span>

在悬停时取消substr

2 个答案: