Width calculation is using the window width and not the parent element's width

[drew-wallace]

If I put a Truncate component in a div with padding, the generated elements are too long. Once I removed the padding, the generated elements fit to the appropriate number of lines.

It seems that you are calculating the appropriate width based on the width of the window and not the width of the Truncate component's parent. Consequently, if you calculate the width of the parent div instead of the window, you can rely on normal text wrapping instead of the current span + br pattern.

Example: go to your demo page, inside ReadMore.js, add this to div surrounding the Truncate component: style={{padding: 15}}

[pablosichert]

The parent container width is read out using target.parentNode.getBoundingClientRect().width, not taking into account any padding.

You can work around that limitation using

<ContainerWithPadding>
  <div>
    <Truncate>
      {content}
    </Truncate>
  </div>
</ContainerWithPadding>

---

It would be possible to add that functionality by reading window.getComputedStyle(target.parentNode).getPropertyValue('padding').

I might implement this at a later time, but - please feel free to submit a PR.

[drew-wallace]

That did the trick. Thanks!

[pablosichert]

Related: #38