diff --git a/src/Truncate.js b/src/Truncate.js
index f206f76b..d1c35412 100644
--- a/src/Truncate.js
+++ b/src/Truncate.js
@@ -127,7 +127,11 @@ export default class Truncate extends Component {
return;
}
- const targetWidth = target.parentNode.getBoundingClientRect().width;
+ const targetParentStyles = window.getComputedStyle(target.parentNode);
+ const targetParentPadding = parseFloat(targetParentStyles['padding-left'] || 0) +
+ parseFloat(targetParentStyles['padding-right'] || 0);
+ const targetWidth = target.parentNode.getBoundingClientRect().width -
+ targetParentPadding;
// Delay calculation until parent node is inserted to the document
// Mounting order in React is ChildComponent, ParentComponent
@@ -152,7 +156,14 @@ export default class Truncate extends Component {
}
measureWidth(text) {
- return this.canvas.measureText(text).width;
+ const {
+ refs: {
+ target
+ }
+ } = this;
+ const targetStyles = window.getComputedStyle(target);
+ const letterSpacing = parseFloat(targetStyles['letter-spacing']) || 0;
+ return this.canvas.measureText(text).width + (letterSpacing * text.length);
}
ellipsisWidth(node) {
diff --git a/test/Truncate.js b/test/Truncate.js
index 09c3575a..9d8ea780 100644
--- a/test/Truncate.js
+++ b/test/Truncate.js
@@ -122,6 +122,17 @@ describe('