Chinese text not supported

[Ktchan825]

This modules doesn't support language that doesn't separate word by space, e.g. Chinese, Japanese

[ke1vin4real]

Did you solve it？ @Ktchan825

[Ktchan825]

Hi @ke1vin1993, I monkey patch the modules with patch-package by myself. here is my patch file

diff --git a/node_modules/react-truncate/lib/Truncate.CommonJS.js b/node_modules/react-truncate/lib/Truncate.CommonJS.js
index dff0cc2..7483c2f 100644
--- a/node_modules/react-truncate/lib/Truncate.CommonJS.js
+++ b/node_modules/react-truncate/lib/Truncate.CommonJS.js
@@ -207,6 +207,7 @@ var Truncate = function (_Component) {
                 _props = this.props,
                 numLines = _props.lines,
                 ellipsis = _props.ellipsis,
+                separator = _props.separator,
                 trimWhitespace = _props.trimWhitespace,
                 targetWidth = this.state.targetWidth,
                 innerText = this.innerText,
@@ -218,7 +219,7 @@ var Truncate = function (_Component) {
             var lines = [];
             var text = innerText(elements.text);
             var textLines = text.split('\n').map(function (line) {
-                return line.split(' ');
+                return line.split(separator);
             });
             var didTruncate = true;
             var ellipsisWidth = this.ellipsisWidth(this.elements.ellipsis);
@@ -234,7 +235,7 @@ var Truncate = function (_Component) {
                     continue;
                 }
 
-                var resultLine = textWords.join(' ');
+                var resultLine = textWords.join(separator);
 
                 if (measureWidth(resultLine) <= targetWidth) {
                     if (textLines.length === 1) {
@@ -248,7 +249,7 @@ var Truncate = function (_Component) {
 
                 if (line === numLines) {
                     // Binary search determining the longest possible line inluding truncate string
-                    var textRest = textWords.join(' ');
+                    var textRest = textWords.join(separator);
 
                     var lower = 0;
                     var upper = textRest.length - 1;
@@ -292,7 +293,7 @@ var Truncate = function (_Component) {
                     while (_lower <= _upper) {
                         var _middle = Math.floor((_lower + _upper) / 2);
 
-                        var _testLine = textWords.slice(0, _middle + 1).join(' ');
+                        var _testLine = textWords.slice(0, _middle + 1).join(separator);
 
                         if (measureWidth(_testLine) <= targetWidth) {
                             _lower = _middle + 1;
@@ -308,7 +309,7 @@ var Truncate = function (_Component) {
                         continue;
                     }
 
-                    resultLine = textWords.slice(0, _lower).join(' ');
+                    resultLine = textWords.slice(0, _lower).join(separator);
                     textLines[0].splice(0, _lower);
                 }
 
@@ -352,7 +353,7 @@ var Truncate = function (_Component) {
                 children = _props2.children,
                 ellipsis = _props2.ellipsis,
                 lines = _props2.lines,
-                spanProps = _objectWithoutProperties(_props2, ['children', 'ellipsis', 'lines']),
+                spanProps = _objectWithoutProperties(_props2, ['children', 'ellipsis', 'lines', 'separator']),
                 targetWidth = this.state.targetWidth,
                 getLines = this.getLines,
                 renderLine = this.renderLine,
@@ -412,6 +413,7 @@ Truncate.propTypes = {
     lines: _propTypes2.default.oneOfType([_propTypes2.default.oneOf([false]), _propTypes2.default.number]),
     trimWhitespace: _propTypes2.default.bool,
     width: _propTypes2.default.number,
+    separator: _propTypes2.default.string,
     onTruncate: _propTypes2.default.func
 };
 Truncate.defaultProps = {
@@ -419,6 +421,7 @@ Truncate.defaultProps = {
     ellipsis: '…',
     lines: 1,
     trimWhitespace: false,
+    separator: '',
     width: 0
 };
 exports.default = Truncate;
diff --git a/node_modules/react-truncate/lib/Truncate.js b/node_modules/react-truncate/lib/Truncate.js
index d618493..c084cb0 100644
--- a/node_modules/react-truncate/lib/Truncate.js
+++ b/node_modules/react-truncate/lib/Truncate.js
@@ -194,6 +194,7 @@ var Truncate = function (_Component) {
                 _props = this.props,
                 numLines = _props.lines,
                 ellipsis = _props.ellipsis,
+                separator = _props.separator,
                 trimWhitespace = _props.trimWhitespace,
                 targetWidth = this.state.targetWidth,
                 innerText = this.innerText,
@@ -205,7 +206,7 @@ var Truncate = function (_Component) {
             var lines = [];
             var text = innerText(elements.text);
             var textLines = text.split('\n').map(function (line) {
-                return line.split(' ');
+                return line.split(separator);
             });
             var didTruncate = true;
             var ellipsisWidth = this.ellipsisWidth(this.elements.ellipsis);
@@ -221,7 +222,7 @@ var Truncate = function (_Component) {
                     continue;
                 }
 
-                var resultLine = textWords.join(' ');
+                var resultLine = textWords.join(separator);
 
                 if (measureWidth(resultLine) <= targetWidth) {
                     if (textLines.length === 1) {
@@ -235,7 +236,7 @@ var Truncate = function (_Component) {
 
                 if (line === numLines) {
                     // Binary search determining the longest possible line inluding truncate string
-                    var textRest = textWords.join(' ');
+                    var textRest = textWords.join(separator);
 
                     var lower = 0;
                     var upper = textRest.length - 1;
@@ -279,7 +280,7 @@ var Truncate = function (_Component) {
                     while (_lower <= _upper) {
                         var _middle = Math.floor((_lower + _upper) / 2);
 
-                        var _testLine = textWords.slice(0, _middle + 1).join(' ');
+                        var _testLine = textWords.slice(0, _middle + 1).join(separator);
 
                         if (measureWidth(_testLine) <= targetWidth) {
                             _lower = _middle + 1;
@@ -295,7 +296,7 @@ var Truncate = function (_Component) {
                         continue;
                     }
 
-                    resultLine = textWords.slice(0, _lower).join(' ');
+                    resultLine = textWords.slice(0, _lower).join(separator);
                     textLines[0].splice(0, _lower);
                 }
 
@@ -339,7 +340,7 @@ var Truncate = function (_Component) {
                 children = _props2.children,
                 ellipsis = _props2.ellipsis,
                 lines = _props2.lines,
-                spanProps = _objectWithoutProperties(_props2, ['children', 'ellipsis', 'lines']),
+                spanProps = _objectWithoutProperties(_props2, ['children', 'ellipsis', 'lines', 'separator']),
                 targetWidth = this.state.targetWidth,
                 getLines = this.getLines,
                 renderLine = this.renderLine,
@@ -399,6 +400,7 @@ Truncate.propTypes = {
     lines: PropTypes.oneOfType([PropTypes.oneOf([false]), PropTypes.number]),
     trimWhitespace: PropTypes.bool,
     width: PropTypes.number,
+    separator: PropTypes.string,
     onTruncate: PropTypes.func
 };
 Truncate.defaultProps = {
@@ -406,6 +408,7 @@ Truncate.defaultProps = {
     ellipsis: '…',
     lines: 1,
     trimWhitespace: false,
+    separator: '',
     width: 0
 };
 export default Truncate;

Then i use the component like <Truncate separator={lang === "zh" ? "": " "}> {Chinese Text}<Truncate>