Tips for condensing text within a card using react bootstrap

Question

Tips for condensing text within a card using react bootstrap

I am currently working with a card that looks like this:

https://i.sstatic.net/nFTLh.png

<Card className="m-5 border-0 shadow" style={styles.card}>
  <Row>
    <Col>
      <Card.Img src={require("../assets/images/findingsPage/EnglishesOfTheWorld.jpg")} style={styles.cardImage} />
    </Col>
    <Col>
      <Card.Body>
      <Card.Title as="h1">Englishes of the World</Card.Title>
      <Card.Text as="h4" style={styles.cardText}>
        How do your grammar intuitions depend on when and where you learned English? Participants took a short grammar quiz, which we are using to understand how grammar differs in different parts of the English-speaking world (USA, Ireland, Australia, etc.). We are also investigating how grammar is different for people who learn English later in life: Do they make different mistakes if their first language is German as opposed to Japanese?
      </Card.Text>
      </Card.Body>
    </Col>
  </Row>
</Card>

I am looking for a way to collapse part of the text if it exceeds the height of the card, similar to what is shown here:

https://i.sstatic.net/oM4CT.jpg

https://i.sstatic.net/8ogje.jpg

Any suggestions or help would be greatly appreciated. Thank you.

css reactjs bootstrap-4

Answer 1

Answer №1

To get started, here's a demo link: https://codesandbox.io/s/cool-wright-u5old?file=/src/App.js

Here's how the logic works:

When the component mounts, a ref is used to check if the height of the text parent exceeds a defined limit
If the height surpasses the limit, the max-height property is set and a toggle button is displayed
Clicking on the button toggles the max-height between the specified limit and the maximum height allowed for the card

The use of max-height is crucial for achieving smooth transitions in CSS, as discussed in this Stack Overflow post.

To make things more convenient, this logic has been encapsulated into a separate Component, but it can also be integrated directly into the original component.

Now, let's dive into the code:

const MAX_POSSIBLE_HEIGHT = 500;

const ExpendableText = ({ maxHeight, children }) => {
  const ref = useRef();
  const [shouldShowExpand, setShouldShowExpand] = useState(false);
  const [expanded, setExpanded] = useState(true);

  useEffect(() => {
    if (ref.current.scrollHeight > maxHeight) {
      setShouldShowExpand(true);
      setExpanded(false);
    }
  }, [maxHeight]);

  return (
    <Card.Text as="h4" style={styles.cardText} ref={ref}>
      <div
        class="inner"
        style={{ maxHeight: expanded ? MAX_POSSIBLE_HEIGHT : maxHeight }}
      >
        {children}
      </div>
      {shouldShowExpand && (
        <button onClick={() => setExpanded(!expanded)}>Expand</button>
      )}
    </Card.Text>
  );
};

And here's the corresponding CSS:

.inner {
  overflow: hidden;
  transition: max-height 0.2s ease;
}

To use the component, simply include it like so:

<ExpendableText maxHeight={95}>
  How do your grammar intuitions depend on when and where you learned English? Participants took a short grammar quiz...
</ExpendableText>

A height transition has been added to the solution for extra flair. If not needed, the code will be shorter.
If content will always need to be truncated, the implementation becomes simpler.

Answer 2

To get started, here's a demo link: https://codesandbox.io/s/cool-wright-u5old?file=/src/App.js

Here's how the logic works:

When the component mounts, a ref is used to check if the height of the text parent exceeds a defined limit
If the height surpasses the limit, the max-height property is set and a toggle button is displayed
Clicking on the button toggles the max-height between the specified limit and the maximum height allowed for the card

The use of max-height is crucial for achieving smooth transitions in CSS, as discussed in this Stack Overflow post.

To make things more convenient, this logic has been encapsulated into a separate Component, but it can also be integrated directly into the original component.

Now, let's dive into the code:

const MAX_POSSIBLE_HEIGHT = 500;

const ExpendableText = ({ maxHeight, children }) => {
  const ref = useRef();
  const [shouldShowExpand, setShouldShowExpand] = useState(false);
  const [expanded, setExpanded] = useState(true);

  useEffect(() => {
    if (ref.current.scrollHeight > maxHeight) {
      setShouldShowExpand(true);
      setExpanded(false);
    }
  }, [maxHeight]);

  return (
    <Card.Text as="h4" style={styles.cardText} ref={ref}>
      <div
        class="inner"
        style={{ maxHeight: expanded ? MAX_POSSIBLE_HEIGHT : maxHeight }}
      >
        {children}
      </div>
      {shouldShowExpand && (
        <button onClick={() => setExpanded(!expanded)}>Expand</button>
      )}
    </Card.Text>
  );
};

And here's the corresponding CSS:

.inner {
  overflow: hidden;
  transition: max-height 0.2s ease;
}

To use the component, simply include it like so:

<ExpendableText maxHeight={95}>
  How do your grammar intuitions depend on when and where you learned English? Participants took a short grammar quiz...
</ExpendableText>

A height transition has been added to the solution for extra flair. If not needed, the code will be shorter.
If content will always need to be truncated, the implementation becomes simpler.

Tips for condensing text within a card using react bootstrap

Answer №1

Similar questions

Troubles with aligning a figure in Bootstrap 4

Uncovering the Reasons Behind Multiple Accesses to a ReactJS Page

Slow TextField Updates in React

Use the useEffect hook to dynamically load an element within the current div

Combining React Conetxt with useReducer and Typescript throws the error message: 'No overload matches this call'

When choosing an email address, the input field in Nextjs turns a bright shade of white

How can we efficiently loop through all the icons in React Material-UI?

Exploring the dimensions of checkboxes in Fluent UI Northstar

Scrolling to the next wrap class in jQuery is not functioning properly with the chatbox and ScrollTop

Step-by-step guide on leveraging PubNub for facilitating group chat creation by users

Address the NPM alert regarding Bootstrap's 'unmet peer dependency' in Angular even if Bootstrap is not utilized

Customizing text documents within an iframe using CSS from the parent page

How can I update my outdated manifest v2 code to manifest v3 for my Google Chrome Extension?

How to target the first and last elements of sequences with a specific class using CSS

Div - containing images removed from slideshow

Tips for utilizing FileReader in a synchronous manner within the context of react/redux

How come I am able to reference a component in styled-components while others cannot?

The Bootstrap website appears visually appealing on desktop browsers, but the div elements are failing to display correctly on mobile devices

How can I retrieve the ID value from the returned promise?

Creating an animated full-width SVG with a background image