請檢查所附的圖像。如您所見，文本溢出了div。我只想折疊溢出的文本并顯示& quot閱讀更多& quot最后。當用戶單擊& quot閱讀更多& quot文本應該擴展。

我正在進行下一個js項目。

div的截圖

我的要求是將文本折疊到指定的行，而不是從指定的行斷開文本。

像這樣創建一個卡組件:

export default function Card() {
  const [expand, setExpand] = useState(false);
  
  return (
    <div>
      <div className={`${style.collapsible_text} ${expanded ? '' : style.collapsed}`}>
        {/* Card text goes here */}
      </div>
      <p onClick={() => setExpand(!expand)}>{expand? "read more..." : "read less..."</p>
    </div>
  );
}

然后，將以下css應用于卡組件:

.collapsible_text {
  max-height: 50px;
  overflow: hidden;
}

.collapsed {
  max-height: 50px;
}