现已实现:
对于一段文字,一个绘本的简介,全部显示:
![](https://www.crifan.com/files/pic/uploads/2021/05/426e3e6c74aa4090b29b1c5e5b54a96b.jpg)
希望改为:
默认最多显示35个单词,超过后,显示…,和more,点击more后,显示全部
bootstrap more
![](https://www.crifan.com/files/pic/uploads/2021/05/febd7f2acfc640699f93372353679174.jpg)
不完全是我们要的效果
参考网页:
![](https://www.crifan.com/files/pic/uploads/2021/05/4c204c1cb5ef4199a544b7b4b2eea5a6.jpg)
![](https://www.crifan.com/files/pic/uploads/2021/05/90680919376c4e279b68272d6aed20cd.jpg)
逻辑是:
默认显示 部分内容加上…
有个see all的按钮
点击后:
- 之前显示的部分,隐藏掉:
- <span class=”description-less-con” style=”display: none;”>
- 之前隐藏的现在显示:
- <span class=”description-more-con” style=””>
所以也可以用类似逻辑
暂时不急着实现,因为可能UI设计会给出更好的实现方式和交互逻辑。
到时候再说。
如果需要实现,可参考:
-》
可以控制是否显示
继续折腾:
![](https://www.crifan.com/files/pic/uploads/2021/05/e118d5c020874dfab2adb8f3b6e1cbe6.jpg)
去优化为:
![](https://www.crifan.com/files/pic/uploads/2021/05/7dbc12431c4a46eeaf70aec25a7015b8.jpg)
bootstrap show more
bootstrap read more
效果貌似不错
bootstrap button background image
期间想要按钮右对齐
bootstrap button align right
用:
float-right
即:
<button class="float-right collapsed" data-toggle="collapse" href="#collapseSummary" aria-expanded="false" aria-controls="collapseSummary">
效果是:
![](https://www.crifan.com/files/pic/uploads/2021/05/f1e519563a214e43949954f977a896be.jpg)
【总结】
目前用代码:
js->html
<div class="book_detail_desc"> <span class="book_detail_keys">简介: </span> <div id="summary"> <p class="collapse book_detail_values" id="collapseSummary"> ${curBookDict["description"]} </p> <button class="float-right collapsed" data-toggle="collapse" href="#collapseSummary" aria-expanded="false" aria-controls="collapseSummary"> </button> </div> </div>
css:
.book_detail_desc{ margin-left: 20px; margin-right: 20px; margin-top: 14px; /* max-height: 7000px; overflow-y: hidden; */ } #summary { font-size: 12px; /* line-height: 1.5; */ } #collapseSummary { margin-bottom: 2px; } #summary p.collapse:not(.show) { height: 70px !important; overflow: hidden; font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #summary p.collapsing { min-height: 70px !important; } /* #summary a.collapsed:after { content: '更多'; } #summary a:not(.collapsed):after { content: '更少'; } */ #summary button.collapsed:after{ /* background-image: url("../img/show_more.png"); */ content: '更多'; color: var(--main_color);; } #summary button:not(.collapsed):after { /* background-image: url("../img/show_less.png"); */ content: '更少'; color: var(--main_color);; }
实现了下面的效果:
在内容多的时候,默认 显示几行,有个更多:
![](https://www.crifan.com/files/pic/uploads/2021/05/2ef8967d0ac748e4ac8e1d54a1ae6dac.jpg)
点击 更多,显示出全部,按钮文字 变更少
![](https://www.crifan.com/files/pic/uploads/2021/05/aa8f6529821047e893031ad88297ca3e.jpg)
但是有个小问题:
当内容本身很少时,没有超过最大高度,结果:
却还是显示出 更多 按钮,且注意到第二行最后一个单词的最后三个字符,变成 …
![](https://www.crifan.com/files/pic/uploads/2021/05/e340727557984cfe8e69a34025cebfe9.jpg)
![](https://www.crifan.com/files/pic/uploads/2021/05/69f68147267d4eca83518de60b8dc704.jpg)