javascript - 在 React 中显示标题下方带有 "Show More"的内容预览

Question

默认情况下，我尝试将节标题(下面的 h5)下方的内容显示为预览，仅显示内容的前几行。然后，文本将淡出，并在底部显示“显示更多”以展开单击。此行为类似于桌面浏览器上的 Reddit，它会显示帖子正文的预览，如果帖子在提要上很长，则会淡出(用户可以单击帖子以查看完整内容)。

我尝试实现react库react-show-more-text，但是折叠 View 中的文本不包含展开时在相同内容中显示的任何格式(例如h6或u属性) 。我想保留正文内容的格式。它也不会淡化到预览内容底部的 0% 不透明度。

                <h5 className="mt-1 pt-3">Compensation</h5>
                <ShowMoreText
                  // lines={3}
                  more="Show more"
                  less="Show less"
                  expanded={false}
                  width={280}
                  className="text-sm pt-3 mx-3"
                >
                  <div>
                    <h6>
                      <u>Incentive Plans</u>
                    </h6>
                    <br />
                    <p className="text-sm">
                      An Annual Incentive Plan (AIP) is offered
                      <br />
                      <br />A Sales Incentive Plan (SIP) is offered
                    </p>
                  </div>
                  <div className="pt-4">
                    <h6 className="mb-4">
                      <u>Stock & Equity</u>
                    </h6>
                    <p className="text-sm">
                      <strong>New Hire Equity:</strong> Granted shortly
                      after hire date
                      <br />
                      <br />
                      <strong>Annual Equity:</strong> Granted once a year
                    </p>
                  </div>
                  <div className="pt-4">
                    <h6 className="mb-4">
                      <u>Employee Stock Purchase Plan (ESPP)</u>
                    </h6>
                    <p className="text-sm">
                      <strong>Contributions:</strong> Up to 15% of base
                      salary can be contributed
                      <br />
                      <br />
                      <strong>Discount:</strong> Stock is purchased at 15%
                      discount off the lower of the market value at the
                      beginning or the end of the offering period
                      <br />
                      <br />
                      <strong>Offering Periods:</strong> January 1 - June 15
                      and July 1 - December 15
                    </p>
                  </div>
                  <DropdownItem divider />
                </ShowMoreText>

有谁知道可以实现此目的的 react 库吗？或者如何编码？

Answer 1

纯 css 解决方案怎么样？您可以利用 text-overflow: ellipsis和white-space: normal属性与绝对定位的伪元素一起创建您想要的效果。 CSS 看起来像这样:

.content {
  position: relative;
  max-height: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

这是一个小codepen演示。