Doesn't detect new line characters.

[Karansidds]

Image

As you can see in the image, I want each sentence to go to the next line similar to the textbox, but it gets attached to the previous sentence and forms a paragraph. The truncation is working perfectly, but I want it to look something like this:

My name is Karan
I am a developer
I love programming and K-Dramas... See More

How can I achieve this?

Code

const readMoreEllipsis = (
    <span>
      ...{' '}
      <span onClick={toggleTruncate} style={showButtonStyles}>
        {showButtonText}
      </span>
    </span>
  );

  if (isTruncated) {
    return (
      <TruncateMarkup lines={lines} ellipsis={readMoreEllipsis}>
        <div style={textProps}>{text}</div>
      </TruncateMarkup>
    );
  }

  return (
    <div style={textProps}>
      {text}

      <span onClick={toggleTruncate} style={hideButtonStyles}>
        {hideButtonText}
      </span>
    </div>
  ); 

[patrik-piskay]

Hey @Karansidds, can you post what textProps and text variables contain in your example? I'd like to see how the new lines are achieved here. Or, ideally, if you could create a repro app using codesandbox, that would be great too!