gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 01:36:59 27 4
gpt4 key购买 nike

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

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

<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 的文本?
  • 有没有办法让插入符号立即显示在文本左侧,而不是上方?

最佳答案

所以,鉴于...

  • 您的 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>

关于javascript - 使用插入符类隐藏和显示文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51026857/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com