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度？
当显示全文时，是否可以隐藏被截断的文本？
有没有办法将插入符号显示在文本的左侧而不是上方？

Answer 1

因此，鉴于...

您的html标记是card-body，但自
您真正想做的就是揭示完整的卡身文本，并自此
插入符号似乎不再被定义为BS4中的独立帮助器

然后

您真的不希望或不需要折叠组件，因为您不希望真正消失折叠元素，只需将其缩小为1行截断的椭圆形文本即可。
我用字体超棒的插入符号代替了明显过时的BS4插入符号
我使用css和JQ执行插入符号旋转并显示卡身文本

编辑：动画动画

从text-truncate类开始动画时，存在各种各样的问题。

cleanest option I found（感谢CSS-Tricks）为flex容器设置了动画。整个文章读起来很有趣，学到了很多东西，所以我重新设计了原来的答案。

我不知道这是否会破坏BS4，但是Cards是基于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>

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

1 个答案:

编辑：动画动画