检查 p 中有多少行文本并存储在变量中

Question

I have a table with a column called "comments". In a particular cell, ONLY when there are more than 2 lines of text I want to:

• render a clickable text showing "show more"
• line clamp the text to 2 lines

Currently, I have a line clamp in every cell set like so:

const ClampedText = styled.p`
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
`;

This element is used like so: <ClampedText>{description}</ClampedText> where description is the text in a cell.

Using styled-components.

What I basically want to do is get a boolean variable stating wether there are more than two lines of text in a particular p- and then conditionally render the component accordingly (with/without "show more" and line-clamp.)

How can this be done?

Idea

The "comments" column has 10% of the width of the table, so I'm thinking that can be used somehow with som JS and calculating the number of lines going to be showing.

Answer 1

You can use string.length to know the length and decide to show a show more link or not. Here is the full code on codesandbox

  const [paragraph, setParagraph] = useState({
    show: null,
    paragraph: "",
    clicked: false
  });

   ...

  return (
    <>
      <p>
        {paragraph.paragraph}
        <span
          style={{ display: paragraph.show ? "inline" : "none" }}
          onClick={() =>
            setParagraph({
              show: true,
              clicked: !paragraph.clicked,
              paragraph: paragraph.clicked
                ? dummyText.substring(0, 25).concat(" ... ")
                : dummyText
            })
          }
        >
          {paragraph.clicked ? "Show less" : "Show more"}
        </span>
      </p>
    </>
  );

Answer 2

Since text line count can be different according to screen size, you can check string length for the condition:

const ClampedText = (props) => {

   const [isExpanded, setIsExpanded] = useState(false);

   const expander = () => {
       if(props.children.toString().length >= 200){
          setIsExpanded(!isExpanded);
       }
   }

   return (
    <div onClick={() => expander()}} className={isExpanded ? 'expanded' : ''}>
     <p>
      {props.children.toString().length < 200 ? 
          props.children.toString() :
          (isExpanded? props.children.toString(): props.children.toString().substr(0,200) + '...')  }
     </p>
    </div>
   )
}