在 React 中显示 header 下方 "Show More" 的内容预览

Question

我试图在默认情况下将 header（下面的 h5）部分下方的内容显示为预览，仅显示内容的前几行。然后文本会淡出，底部有一个“显示更多”以展开 onClick。此行为类似于桌面浏览器上的 Reddit，它显示 post body 的预览，如果 post 在提要上很长（然后用户可以单击post 查看全文）。

我尝试实施反应库 react-show-more-text，但折叠视图中的文本不包含展开时显示在相同内容中的任何格式（例如 h6 或 u 属性） .我想保留 body 内容中的格式。它也不会向预览内容的底部淡入 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 演示。

在 React 中显示 header 下方 "Show More" 的内容预览

Showing a preview of content with "Show More" below header in React

javascript

expand

preview

reactjs

next.js