【基本解决】bootstrap中实现默认显示一段内容点击more后显示全部

现已实现：

对于一段文字，一个绘本的简介，全部显示：

希望改为：

默认最多显示35个单词，超过后，显示…，和more，点击more后，显示全部

bootstrap more

Bootstrap JS Collapse Reference

Tryit Editor v3.5

不完全是我们要的效果

Bootstrap Collapse

Collapse · Bootstrap

参考网页：

https://www.scholastic.com/teachers/books/shadow-breakers-by-daniel-blythe/

逻辑是：

默认显示部分内容加上…

有个see all的按钮

点击后：

之前显示的部分，隐藏掉：
- <span class=”description-less-con” style=”display: none;”>
之前隐藏的现在显示：
- <span class=”description-more-con” style=””>

所以也可以用类似逻辑

暂时不急着实现，因为可能UI设计会给出更好的实现方式和交互逻辑。

到时候再说。

如果需要实现，可参考：

Utilities for layout · Bootstrap

-》

Display property · Bootstrap

可以控制是否显示

继续折腾：

去优化为：

bootstrap show more

bootstrap read more

javascript – Bootstrap “read more” button – how to collapse and change button text with no time difference? – Stack Overflow

Read More – Bootstrap 4

效果貌似不错

Bootstrap Snippet Show More Content on Click using HTML Javascript

html – Bootstrap collapse change button to read less on click – Stack Overflow

css – Bootstrap toggle collapse not working while trying to show more options in a html form – Stack Overflow

Bootstrap Toggle Expand/Collapse Text

Bootstrap Snippet read more link using HTML jQuery

bootstrap button background image

css – How to add image background to btn-default twitter-bootstrap button? – Stack Overflow

css – Can I use an image as a button in Bootstrap? – Stack Overflow

Bootstrap button with custom image

期间想要按钮右对齐

bootstrap button align right

How can I get my Twitter Bootstrap buttons to right align? – Stack Overflow

用：

1	`float-right`

即：

1	`<button class="float-right collapsed"` `data-toggle="collapse"` `href="#collapseSummary"` `aria-expanded="false"` `aria-controls="collapseSummary">`

效果是：

【总结】

目前用代码：

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);;
}