Long html not truncating

[ndlganeshu]

Hi ,

HTML along with text is not truncating

see the below example

import React from "react";
import "./styles.css";
import Truncate from "react-truncate-html";
export default function App() {
  const content = `<div>
  <strong>User roles: </strong>
  hello hello hello hello hello hello hello hello hello hello hello
  hello hello hello <a href=''>THis is the hyperlink</a>hello hello
  hello hello hello hello hello hello hello hello hello hello hello
  hello hello hello hello 1111111 hello hello hello hello hello hello
  hello hello hello hello hello hello hello hello hello hello hello
  hello hello hello hello hello hello hello hello hello hello hello
  hello hello hello 222222 hello hello hello hello hello hello hello
  hello hello hello hello hello hello hello hello hello hello hello
  hello hello hello hello hello hello hello hello hello hello hello
  hello hello 333333 hello hello hello hello hello hello hello hello
  hello hello hello hello hello hello hello hello hello hello hello
  hello hello hello hello hello hello hello hello hello hello hello
  hello 44444
  </div>`;
  return (
    <div className="App">
      <Truncate
        lines={2}
        dangerouslySetInnerHTML={{
          __html: content
        }}
      />
    </div>
  );
}

[ppduss]

Same problem here, truncate function not working.

[bobrom]

I guess the library is not supported anymore and we are not going to have it fixed properly. For anyone else struggling, there seems to be a workaround for this issue. Simply try adding a space (or an empty tag) in the very beginning of your html content, like this:

const content = ` <div>...`

or

const content = `<span></span><div>...`

I've got no idea why but it does the trick.

[jariz]

This lib is not supported anymore, just use -webkit-line-clamp which is now supported in all normal browsers