Take letter-spacing into account when sizing container.

eric-adstage · eric-adstage · commit 86352e52d118 · 2017-03-28T10:47:20.000-07:00
diff --git a/src/Truncate.js b/src/Truncate.js
@@ -156,7 +156,9 @@ export default class Truncate extends Component {
     }
 
     measureWidth(text) {
-        return this.canvas.measureText(text).width;
+        const targetStyles = window.getComputedStyle(this.refs.target);
+        const letterSpacing = parseFloat(targetStyles['letter-spacing']) || 0;
+        return this.canvas.measureText(text).width + (letterSpacing * text.length);
     }
 
     ellipsisWidth(node) {

Original file line number	Diff line number	Diff line change
`@@ -156,7 +156,9 @@ export default class Truncate extends Component {`
`156`	`156`	`}`
`157`	`157`
`158`	`158`	`measureWidth(text) {`
`159`		`- return this.canvas.measureText(text).width;`
	`159`	`+ const targetStyles = window.getComputedStyle(this.refs.target);`
	`160`	`+ const letterSpacing = parseFloat(targetStyles['letter-spacing']) \|\| 0;`
	`161`	`+ return this.canvas.measureText(text).width + (letterSpacing * text.length);`
`160`	`162`	`}`
`161`	`163`
`162`	`164`	`ellipsisWidth(node) {`