How to implement smooth text expansion and truncation with transition in React?

Question

I’m working on a React component where I need to show an award message that can expand and collapse based on user interaction. The goal is to smoothly expand the content when the user clicks "Read More" and smoothly collapse it when they click "Read Less". Additionally, the content should be truncated when collapsed.

However, I’m running into an issue with applying smooth transitions while toggling between the expanded and collapsed states. Here's what I'm trying to achieve:

When the content is collapsed: The content should be truncated (using line-clamp or similar). The height should be animated to make it look smooth when collapsing. When the content is expanded: The height of the content should expand smoothly to show the full message. The truncation should be removed and the full message should be visible. Problem: The main issue I’m facing is that the text is getting truncated immediately, even before the collapse transition happens, and the transition itself isn’t smooth.

I’ve tried using -webkit-line-clamp and max-height, but it doesn’t seem to work as expected, and the truncation happens too abruptly.

Here’s the code I’ve tried so far: tsx

`

export const Ellipsis = (textLineAmounts: number) => css`
    display: -webkit-box;
    display: -moz-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-line-clamp: ${textLineAmounts};
    -moz-line-clamp: ${textLineAmounts};
`;

export const ExpandableBodyRow = styled.div<BodyRowProps>`
    box-sizing: border-box;
    display: flex;
    max-height: ${props => (props.expanded ? `2000px` : `75px`)};
    margin: ${({ theme }) => `0 ${theme.space.single}px ${theme.space.double}px`};
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
`;

interface AwardMessageProps {
    isTruncated: boolean;
}

export const AwardMessage = styled.div<AwardMessageProps>`
    ${({ isTruncated }) => isTruncated && Ellipsis(3)}
    color: ${({ theme }) => theme.color.default.primaryText};
`;

` For the container holding the body, I allow dynamic expansion:

tsx

Then, in the component:

    const standardAward: JSX.Element = (
        <>
            <SC.ExpandableBodyRow expanded={expanded}>
                {award?.awardMessage 
                    <SC.AwardMessage isTruncated={!expanded}>
                        <p
                            ref={messageTextRef}
                            tabIndex={-1}
                        >
                            {award?.awardMessage}
                        </p>
                    </SC.AwardMessage>
                }
            </SC.ExpandableBodyRow>
            {!isRestrictedAward && isTruncated && (
                <SC.ReadMoreRow>
                    {award?.awardMessage && (
                        <button
                            onClick={clickHandler}
                        >
                            {expandButtonText}
                        </button>
                    )}
                </SC.ReadMoreRow>
            )}
        </>
    );

What I’ve tried:Using -webkit-line-clamp for truncation – This does not transition smoothly when expanding or collapsing.Using max-height for smooth height transition – This works for the height transition but doesn't handle truncation smoothly.JavaScript-based dynamic truncation – But the truncation happens too quickly, causing a jump.Desired behavior:Smooth expansion and collapse.Truncation only applies when collapsed.Avoid abrupt changes when toggling between expanded and collapsed.I would really appreciate any suggestions or examples on how to implement smooth transitions for both the expansion and truncation of the content.

Thanks in advance!