javascript - 如果文本不适合显示更多/更少

Question

我正在使用 jquery 创建一些带有动态数据的卡片。有一个描述属性是否适合卡片。当它不合适时，我想保持卡片与其他卡片大小相同，但添加一个“显示更多/更少”按钮以展开卡片以显示其余说明。

我创建了一个 fiddle显示卡片创建以及我到目前为止尝试过的内容。

此时我有一个函数 checkTruncation 将检查文本是否适合其容器。这个问题似乎取决于元素尚未呈现的事实，因此它们的宽度为 0，这使得函数返回始终为真。

函数是这样的:

let checkTruncation = function (jqueryElement) {
    var $element = jqueryElement;
    if ($element) {
        var $c = $element
            .clone()
            .css({ display: 'inline', width: 'auto', visibility: 'hidden' })
            .appendTo('body');

        let truncated = $c.width() > $element.width()
        console.log($c.width(), $element.width(), $c.width() > $element.width())
        $c.remove();

        return truncated;
    }
    return false;
}

此外，有没有建议的库可以实现此功能，而不是我重新发明轮子？我知道我见过这样的行为，但不记得在哪里。

更新

在上面的 fiddle 中，我只是调用了 getCard 函数，它负责为卡片提供模板，两次只是为了展示一些示例。在现实生活中，我通过 ajax 获取数据并在用户单击按钮时使用以下内容填充卡片:

$('.fetchButton').on('click', function(){
    $.get(url, filter)
        .done(function (data) {
            jQuery.each(data, function (index, item) {
                $('.container').append(getCard(item));
            })
        }
})

更新 2

借助 @LGSon 我来到这个scenario这主要是使用 CSS 来实现我所需要的。给出的答案仍然有效并且确实解决了我的问题所以我会保留它作为答案。

Answer 1

除了给出的答案(它解释了为什么原始代码不起作用)之外，这里还有一种不同的方法，展示了如何使用 CSS 来显示/隐藏“阅读更多...” 按钮

使用 absolute: position 和 overflow: hidden 我们可以隐藏 “按钮” 在底部“文本” 元素，当该元素达到“包装” 高度时，隐藏的“按钮” 将变为可见。

我还使用伪元素和 data-* 属性在标记中保留 “按钮文本”，以及 CSS attr() 在显示/隐藏文本时切换它。

堆栈片段

document.querySelectorAll('.readmore').forEach( function(link) {
  link.addEventListener('click', function() {
    this.closest('.wrapper').classList.toggle('show');
  });
});

.wrapper {
  height: 70px;
  border: 1px solid gray;
  overflow: hidden;
}
.wrapper.show {
  height: auto;
}

.text {
  position: relative;
  overflow: hidden;
}

.readmore {
  position: absolute;
  width: 100%;
  top: 52px;
  left: 0;
  background: white;
  color: red;
  cursor: pointer;
}
  .readmore::before {
    content: attr(data-more)
  }
  .wrapper.show .readmore {
    position: relative;
    top: auto;
    display: block;
  }
  .wrapper.show .readmore::before {
    content: attr(data-less)
  }

<div class="wrapper">
  <div class="text">
    Some smaller dummy text here

    <span class="readmore" data-more="Show more..." data-less="Show less..."></span>
  </div>
</div>

<div class="wrapper">
  <div class="text">
    Some bigger dummy text here <br>
    Some bigger dummy text here <br>
    Some bigger dummy text here <br>
    Some bigger dummy text here <br>
    Some bigger dummy text here <br>
    
    <span class="readmore" data-more="Show more..." data-less="Show less..."></span>
  </div>
</div>

---

如果可能，“显示更多/更少...” 文本当然可以在 CSS 中设置，以简化维护并将其放在一个地方。

document.querySelectorAll('.readmore').forEach( function(link) {
  link.addEventListener('click', function() {
    this.closest('.wrapper').classList.toggle('show');
  });
});

.wrapper {
  height: 70px;
  border: 1px solid gray;
  overflow: hidden;
}
.wrapper.show {
  height: auto;
}

.text {
  position: relative;
  overflow: hidden;
}

.readmore {
  position: absolute;
  width: 100%;
  top: 52px;
  left: 0;
  background: white;
  color: red;
  cursor: pointer;
}
  .readmore::before {
    content: 'Show more...'
  }
  .wrapper.show .readmore {
    position: relative;
    top: auto;
    display: block;
  }
  .wrapper.show .readmore::before {
    content: 'Show less...'
  }

<div class="wrapper">
  <div class="text">
    Some smaller dummy text here

    <span class="readmore"></span>
  </div>
</div>

<div class="wrapper">
  <div class="text">
    Some bigger dummy text here <br>
    Some bigger dummy text here <br>
    Some bigger dummy text here <br>
    Some bigger dummy text here <br>
    Some bigger dummy text here <br>
    
    <span class="readmore"></span>
  </div>
</div>

---

根据评论更新

这是您的 Fiddle 的更新 Stack 片段版本/Codepen sample 的

let getCard = function(options) {
  let item = options.data;
  let $parent = options.parent;

  let outerDiv = $('<div>').addClass('shops-content-right');
  let boxDiv = $('<div>').addClass('boxes-right row');
  let shopDiv = $('<div>').addClass('one-shop-box col-md-6 offset-md-3');
  let cubeDiv = $('<div>').addClass('cube text-center');

  let wrapperDiv = $('<div>').addClass('wrapper');
  let textDiv = $('<div>').addClass('text');
  let descriptionP = $('<p>').addClass('text-disc').text(item.description);

  let loadMoreP = $('<span>More >').addClass('readmore');

  textDiv.append([descriptionP, loadMoreP]);
  wrapperDiv.append(textDiv);
  cubeDiv
    .append(wrapperDiv);

  shopDiv.append(cubeDiv);
  boxDiv.append(shopDiv);
  outerDiv.append(boxDiv);

  $parent.append(outerDiv);

  loadMoreP.on('click', function() {
    if (wrapperDiv.hasClass('collapsed')) {
      wrapperDiv.removeClass('collapsed');
      loadMoreP.text("More >");
    } else {
      wrapperDiv.addClass('collapsed');
      loadMoreP.text("Less <");
    }
  })

  return outerDiv;
}


$('.fetchButton').on('click', function() {
  getCard({
    data: {
      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum'
    },
    parent: $('.container'),
    lines: 3
  })
  getCard({
    data: {
      description: 'Lorem ipsum dolor sit amet, consectetur'
    },
    parent: $('.container'),
    lines: 3
  })
})

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.one-shop-box {
  border: 1px solid;
}

.shops-content-right .one-shop-box .cube p.text-disc {
  font-size: 16px;
  /*height: 50px;*/
  overflow: hidden;
}

.wrapper {
  height: 90px;
  overflow: hidden;
}

.wrapper.collapsed {
  height: auto;
}

.text {
  position: relative;
  overflow: hidden;
}

.readmore {
  position: absolute;
  width: 100%;
  top: 72px;
  left: 0;
  background: white;
  color: red;
}

.wrapper.collapsed .readmore {
  position: relative;
  top: auto;
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <button class="fetchButton">
Fetch Data
</button>

</div>