时间戳

首页 > 解决方案 > 在 React 的标题下方显示带有“显示更多”的内容预览

javascript - 在 React 的标题下方显示带有“显示更多”的内容预览

问题描述

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

我尝试实现反应库 react-show-more-text，但折叠视图中的文本不包含任何在展开时显示在相同内容中的格式（例如 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>

有谁知道可以做到这一点的反应库？或者如何编码？

标签： javascriptreactjsnext.jspreviewexpand

解决方案

纯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演示。

推荐阅读