Text in the token helper's columns are now wrapped, so longer token names or descriptions can be properly displayed. Fixes #3100.

src/Orchard.Web/Modules/Orchard.Tokens/Scripts/orchard-tokens-admin.js

@@ -1,13 +1,13 @@
 jQuery.fn.extend({
     insertAtCaret: function (myValue) {
-        return this.each(function(i) {
+        return this.each(function (i) {
             if (document.selection) {
                 //For browsers like Internet Explorer
                 this.focus();
                 sel = document.selection.createRange();
                 sel.text = myValue;
                 this.focus();
-            } else if (this.selectionStart || this.selectionStart == '0') {
+            } else if (this.selectionStart || this.selectionStart === "0") {
                 //For browsers like Firefox and Webkit based
                 var startPos = this.selectionStart;
                 var endPos = this.selectionEnd;
@@ -26,19 +26,19 @@
 });
 
 jQuery.fn.extend({
-    tokenized : function () {
+    tokenized: function () {
         return $(this).each(function () {
             var _this = $(this);
 
-            // add an icon to tokenized inputs
-            _this.wrap('<span class="token-wrapper"></span>');
-            var popup = $('<div><span class="tokenized-popup">&nbsp;</span></div>')
+            // Add an icon to tokenized inputs.
+            _this.wrap("<span class='token-wrapper'></span>");
+            var popup = $("<div><span class='tokenized-popup'>&nbsp;</span></div>");
             _this.parent().prepend(popup);
 
-            // show the full list of tokens when the icon is clicked
-            popup.children('.tokenized-popup').click(function () {
+            // Show the full list of tokens when the icon is clicked.
+            popup.children(".tokenized-popup").click(function () {
                 var input = $(this).parent().next();
-                // pass empty string as value to search for, displaying all results
+                // Pass empty string as value to search for, displaying all results.
                 input.autocomplete("search", "");
                 input.focus();
             });
@@ -51,14 +51,18 @@ jQuery.fn.extend({
                     return false;
                 }
             }).each(function () {
-                $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
-                    var result = item.value == '' ? $('<li class="accategory"></li>') : $("<li></li>");
+                $(this).data("ui-autocomplete")._renderItem = function (ul, item) {
+                    var result = item.value === "" ? $("<li class='accategory'></li>") : $("<li></li>");
 
-                    var desc = item.desc.length > 50 ? item.desc.substring(0, 50) + "..." : item.desc;
+                    // Place invisible space characters inside long strings to prevent word-wrap to split words.
+                    var value = item.value.replace(/\./g, "\.\u200B");
+                    var label = item.label.replace(/,/g, ",\u200B");
 
                     return result
                         .data("ui-autocomplete-item", item)
-                        .append('<a ><span class="aclabel">' + $('<div/>').text(item.label).html() + ' </span><span class="acvalue">' + $('<div/>').text(item.value).html() + ' </span><span class="acdesc">' + $('<div/>').text(desc).html() + "</span></a>")
+                        .append("<a><div class='listitemtext aclabelmod'>" + $("<div/>").text(label).html()
+                        + "</div><div class='listitemtext acvaluemod'>" + $("<div/>").text(value).html()
+                        + "</div><div class='listitemtext acdescmod'>" + $("<div/>").text(item.desc).html() + "</div></a>")
                         .appendTo(ul);
                 };
             });
@@ -66,14 +70,14 @@ jQuery.fn.extend({
     },
 });
 
-$(function() {
+$(function () {
 
     $.tokens = {};
 
-    // provide autocomplete behavior to tokenized inputs
-    // tokensUrl is initialized from the view
+    // Provide autocomplete behavior to tokenized inputs.
+    // tokensUrl is initialized from the view.
     $.get(tokensUrl, function (data) {
         $.tokens = data;
-        $('.tokenized').tokenized();
+        $(".tokenized").tokenized();
     });
-});
+});

src/Orchard.Web/Modules/Orchard.Tokens/Styles/orchard-tokens-admin.css

@@ -1,60 +1,54 @@
-.tokenized-popup 
-{
-    position:absolute;
+.tokenized-popup {
+    position: absolute;
     background: url('images/tokensPopup.gif');
     background-repeat: no-repeat;
-    width:10px;
-    height:10px;
+    width: 10px;
+    height: 10px;
     cursor: pointer;
-    
-    padding-right:8px;
-    margin-top:0.15em;
-    right:100%;
+    padding-right: 8px;
+    margin-top: 0.15em;
+    right: 100%;
 }
 
 .token-wrapper {
-    position:relative;
+    position: relative;
 }
 
 .token-wrapper > div {
-    float:left; 
-    left:100%;
+    float: left;
+    left: 100%;
     position: absolute;
-    margin-bottom: 0px;
+    margin-bottom: 0;
 }
 
-    .token-wrapper span[role="status"] {
-        display: none;
-    }
-.ui-autocomplete 
-{
-	max-height: 12em;
+.token-wrapper span[role="status"] {
+    display: none;
+}
+
+.ui-autocomplete {
+    max-height: 12em;
     background: white;
     border: 1px solid #BDBCBC;
     width: 700px;
-    overflow :auto;
+    overflow: auto;
 }
 
-.ui-autocomplete .acdesc
-{
+.ui-autocomplete .acdesc {
     padding-right: 5px;
     float: right;
 }
-	
-.ui-autocomplete .acvalue
-{
+
+.ui-autocomplete .acvalue {
     left: 150px;
     position: absolute;
 }
-	
-.ui-autocomplete .accategory
-{
+
+.ui-autocomplete .accategory {
     font-weight: bold;
 }
 
 .ui-autocomplete li a {
-	
-	padding-left: 5px;
+    padding-left: 1%;
     background-color: transparent;
     color: #333;
 }
@@ -65,3 +59,21 @@
     cursor: pointer;
 }
 
+.ui-autocomplete .listitemtext {
+    display: inline-block;
+    vertical-align: top;
+    padding-right: 1%;
+    word-wrap: break-word;
+}
+
+.ui-autocomplete .acdescmod {
+    width: 42%;
+}
+
+.ui-autocomplete .acvaluemod {
+    width: 28%;
+}
+
+.ui-autocomplete .aclabelmod {
+    width: 24%;
+}