Question

我正在尝试做一个可碰撞的文本，它显示为文本的“预览”，修复高度为248px。使用JS我删除了这个max-width，用户可以看到全文。

问题在于移动设备我根据屏幕的大小在中间剪切文本。

你能帮我解决这个问题吗？

以下是一个例子：

.collapsible-content {
  max-height: 248px;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  margin-bottom: 4rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

<div class="collapsible-container enable-collapsible" data-aura-rendered-by="2478:0">
  <div class="collapsible-content" data-aura-rendered-by="2479:0">
    <p data-aura-rendered-by="2480:0">
      <div dir="ltr" data-aura-rendered-by="2483:0" class="uiOutputRichText" data-aura-class="uiOutputRichText">
        <p data-aura-rendered-by="2484:0">Do you want to make the shift to business leadership? As a general manager, do you need more confidence and influence so you can make a positive impact at a personal and business level?</p>
        <p data-aura-rendered-by="2484:0">Transition to Business Leadership (TBL) helps you make this move quickly and successfully through a unique combination of personal leadership development with coaching, strategy, execution and managing organizational change.</p>
        <p data-aura-rendered-by="2484:0">Completing TBL is your 2nd step to Program for Executive Development. You may also take TBL as a stand-alone program.</p>
        <!--render facet: 2484:0-->
      </div>
    </p>
  </div><button class="toggle-text toggle-text-more btn btn--text slds-button" data-aura-rendered-by="2485:0">+ Read more</button><button class="toggle-text toggle-text-less btn btn--text slds-button" data-aura-rendered-by="2487:0">- Read less</button></div>

Answer 1

您使用什么类型的控件来管理扩展内容的状态？

您可以添加一个覆盖默认样式的容器...

.collapsible-content.expanded {
  max-height: 100%;
}
<div class="collapsible-content expanded" data-aura-rendered-by="2479:0">

你需要一些JS才能实现这一目标。

具有固定高度的可折叠文本

1 个答案: