javascript - 使用插入符类隐藏和显示文本

Question

我想显示描述字段中的文本子集，然后在单击插入符号时切换完整文本。

我目前的方法，接近我想要的:

<div class="card-body">
  <a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" class="dropdown-toggle">
  </a>
  <div class="collapse" id="collapseExample">
    <p class="card-subtitle text-muted"><%= @foo[:description] %></p>
  </div>
  <p class="card-subtitle text-muted text-truncate"><%= @foo[:description] %></p>
</div>

问题:

• 有没有办法让插入符号在显示/隐藏内容时旋转 90 度？
• 有没有办法在显示全文时隐藏 chop 的文本？
• 有没有办法让插入符号立即显示在文本左侧，而不是上方？

Answer 1

所以，鉴于...

• 您的 html 标记是 card-body 但因为
• 您真正想做的就是显示完整的卡片正文文本，因为
• 脱字符号似乎不再被定义为 BS4 中的独立助手

然后

• 您确实不想要或不需要折叠组件，因为您真的不希望折叠元素消失，只是减少到 1 行 chop 、省略的文本
• 我用 font Awesome 插入符替换了明显已弃用的 BS4 插入符
• 我使用 css 和 JQ 来执行插入符旋转和卡片正文文本显示

<小时/>

编辑:动画 Flex

在 text-truncate 类中进行动画处理时会出现各种各样的问题。

cleanest option I found (感谢 CSS-Tricks )为弹性容器设置动画。整篇文章读起来很有趣，学到了很多东西，所以我修改了原来的答案。

我不知道这是否会破坏 BS4，但由于卡片一开始就是基于 Flex 的......我不知道，但它应该很有趣。

$(function() {
  $('a').click(function() {
    $(this).find('i.caret').toggleClass('cw-90');
    $('div.card-text.collapsible').toggleClass('collapsed');
  });

});

.fa-caret-right {
  transition: all 250ms;
}

.cw-90 {
  transform: rotate(90deg);
}

.card-body {
  display: inherit;
  justify-content: flex-start;
  flex-direction: inherit;
  height: 200px;
}

.collapsible {
  overflow: hidden;
  transition: flex 1s ease-out;
  height: auto;
  min-height: 1rem;
  box-sizing: content-box;
  flex: 1;
}

.collapsed {
  flex: 0;
}

.collapsible.collapsed p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collapsible:not(.collapsed) p {
  overflow: auto;
  text-overflow: auto;
  white-space: normal;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <a href="#" role="button">LinkButton<i class="ml-1 caret fas fa-caret-right"></i></a>
    <div class="card-text border rounded p-2 collapsible collapsed">
      <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
    </div>

  </div>
</div>