Ellipsis Position

[antiwebbite]

Hello!

This component is fantastic, great work!

I was wondering, is there was a way to set the position of the ellipsis? Currently, it seems to appear at the end of the line (which make sense). But is there a way for us to maybe set it to cut off the line 50% of the way?

e.g.
"Current version"
Here is my text block. I set my lines to 3 and
by the time I finish this text here we will be
on the third line and it ends at t... Read More.

"Cut Off Version"
Here is my text block. I set my lines to 3 and
by the time I finish this text here we will be
on the th... Read More.

Thanks!

[Patrik Piskay]

Hi, while it's not possible to set the position of the ellipsis programmatically by configuring TruncateMarkup, you can always use ellipsis' styles to achieve what you want!

Example - https://codesandbox.io/s/vnvzry8k5y

class App extends Component {
  render() {
    const readMoreEllipsis = (
      <span
        style={{
          display: "inline-block",
          paddingRight: "50%", // <-- this bit
        }}
      >
        ... Read more
      </span>
    );

    return (
      <div style={{ width: "250px" }}>
        <TruncateMarkup lines={3} ellipsis={readMoreEllipsis}>
          <div>
            Here is my text block. I set my lines to 3 and by the time I finish
            this text here we will be on the third line and it ends at t
          </div>
        </TruncateMarkup>
      </div>
    );
  }
}

Hope this helps!

[antiwebbite]

Fantastic, thank you!