Javascript 用“显示内容预览”；“显示更多”；在React中的收割台下方

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

我尝试实现react库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>

补偿
激励计划



提供年度激励计划（AIP）



提供销售激励计划（SIP）

股票与权益

新员工权益：即将授予
租用日期后




年度权益：每年授予一次

员工股票购买计划（ESPP）

贡献：高达基础的15%
工资可以供款




折扣：以15%的价格购买股票
以较低的市价折价
发行期的开始或结束




发行期：1月1日至6月15日
以及七月一日至十二月十五日

---

有人知道react库可以实现这一点吗？或者如何对其进行编码？

纯css解决方案如何？您可以利用

文本溢出：省略号

和

空白：正常

属性以及绝对定位的伪元素来创建所需的效果。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;
}

这里是一个小演示