问题描述
我试图在默认情况下将部分标题(下面的 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>
有谁知道可以做到这一点的反应库?或者如何编码?
解决方法
纯 css 解决方案怎么样?您可以利用 text-overflow: ellipsis
和 white-space: normal
属性以及 absolute 定位的 伪元素 来创建您想要的效果。 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 演示。