Split on Word Boundary Functionality

README.md

@@ -48,6 +48,7 @@ Settings
 * **tooltip** _(Default: `true`)_ When true, the `title` attribute of the targeted HTML element will be set to the original, untruncated string. Valid values include `true` and `false`.
 * **width** _(Default: `'auto'`)_ The width, in characters, of the desired text. When set to `'auto'`, trunk8 will maximize the amount of text without spilling over.
 * **parseHTML** _(Default: `'false'`)_ When true, parse and save html structure and restore structure in the truncated text.
+* **splitOn** _(Default: `'false'`)_ Takes and allow splitting on a regular expression. More commonly used to truncate to a whitespace. Takes into account the `side` option and trims only that side.
 * **onTruncate** _(Callback)_: Called after truncation is completed.
 
 Public Methods

demo.html

@@ -59,6 +59,18 @@
 				</select>
 			</label>
 		</div>
+
+		<div>
+			<label>
+				Split On
+
+				<select id="spliton">
+					<option value="false" selected>false (no splitting turned on)</option>
+					<option value="\s">\s</option>
+					<option value="[aeiou]">[aeiou] (vowels)</option>
+				</select>
+			</label>
+		</div>
 
 		<div>
 			<pre id="settings"></pre>
@@ -147,7 +159,18 @@
 		$('#txt').trunk8({fill: this.value});
 		updateSettings($('#txt').trunk8('getSettings'));
 	});
+
+	$('#spliton').change(function () {
+    if(this.value === 'false')
+      value = false;
+    else
+      value = this.value;
+
+		$('#txt').trunk8({splitOn: value});
+		updateSettings($('#txt').trunk8('getSettings'));
+	});
+
 });
 		</script>
 	</body>
-</html>
+</html>

trunk8.js

@@ -139,6 +139,7 @@
 			side = settings.side,
 			fill = settings.fill,
 			parseHTML = settings.parseHTML,
+			splitOn = settings.splitOn,
 			line_height = utils.getLineHeight(this) * settings.lines,
 			str = data.original_text,
 			length = str.length,
@@ -178,6 +179,10 @@
 
 				bite = utils.eatStr(str, side, length - bite_size, fill);
 
+			if(splitOn) {
+				bite = utils.eatFromLastOccurance(bite, splitOn, side, fill);
+			}
+
 				if (parseHTML && htmlObject) {
 					bite = rebuildHtmlFromBite(bite, htmlObject, fill);
 				}
@@ -211,6 +216,10 @@
 
 			bite = utils.eatStr(str, side, bite_size, fill);
 
+			if(splitOn) {
+				bite = utils.eatFromLastOccurance(bite, splitOn, side, fill);
+			}
+
 			this.html(bite);
 
 			if (settings.tooltip) {
@@ -351,7 +360,41 @@
 				$(elem).html(html).css({ 'float': floats, 'position': pos }).unwrap();
 
 				return line_height;
+		},
+
+		eatFromLastOccurance: function (str, splitOn, side, fill) {
+			/* Executes the following algorithm to support splitting on a regex:
+			 * 1. determine which side to trim
+			 * 2. remove the filled text
+			 * 3. iterate on substrings checking for regex to split on
+			 * 4. trim the text to that point
+			 * 5. add the fill text back
+			 */
+			switch (side) {
+				case SIDES.right:
+					str = str.replace(new RegExp(fill + '$'), '');
+					splitOn = new RegExp(splitOn + '$');
+					while (str.length > 0 && !str.match(splitOn)) {
+						str = str.slice(0, -1);
+					}
+					str = str + fill;
+					break;
+
+				case SIDES.left:
+					str = str.replace(new RegExp('^' + fill), '');
+					splitOn = new RegExp('^' + splitOn);
+					while (str.length > 0 && !str.match(splitOn)) {
+						str = str.slice(1);
+					}
+					str = fill + str;
+					break;
+
+				default:
+					break;
 			}
+
+			return str;
+		}
 	};
 
 	utils.eatStr.cache = {};
@@ -379,6 +422,7 @@
 		tooltip: true,
 		width: WIDTH.auto,
 		parseHTML: false,
+		splitOn: false,
 		onTruncate: function () {}
 	};
 })(jQuery);