मैं डिफ़ॉल्ट रूप से पूर्वावलोकन के रूप में एक अनुभाग शीर्षलेख (नीचे h5) के नीचे सामग्री दिखाने की कोशिश कर रहा हूं, सामग्री की केवल पहली कुछ पंक्तियों को प्रदर्शित करने के साथ। टेक्स्ट फिर फीका हो जाएगा, ऑनक्लिक का विस्तार करने के लिए नीचे "अधिक दिखाएं" के साथ। यह व्यवहार डेस्कटॉप ब्राउज़र पर रेडिट के समान है जो पोस्ट बॉडी का पूर्वावलोकन दिखाता है और यदि पोस्ट फ़ीड पर लंबी है (जहां उपयोगकर्ता इसे पूर्ण रूप से देखने के लिए पोस्ट पर क्लिक कर सकता है) फीका हो जाता है।

मैंने प्रतिक्रिया पुस्तकालय प्रतिक्रिया-शो-अधिक-पाठ को लागू करने का प्रयास किया, लेकिन संक्षिप्त दृश्य में पाठ में कोई भी स्वरूपण नहीं है जो विस्तारित होने पर उसी सामग्री में दिखाई देता है (जैसे कि 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>

क्या किसी को प्रतिक्रिया पुस्तकालय के बारे में पता है जो इसे पूरा कर सकता है? या इसे कैसे कोडित किया जा सकता है?

2
connorw94 16 मार्च 2021, 02:56

1 उत्तर

सबसे बढ़िया उत्तर

शुद्ध सीएसएस समाधान के बारे में क्या? आप अपने इच्छित प्रभाव को बनाने के लिए पूर्ण स्थित छद्म-तत्व के साथ text-overflow: ellipsis और white-space: normal गुणों का लाभ उठा सकते हैं। सीएसएस कुछ इस तरह दिखेगा:

.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 डेमो दिया गया है।

2
Gh05d 16 मार्च 2021, 13:40