用jQuery压缩文本框中的字符

Question

I have strings, eg

Computer > Software > Programming Language > Python
Computer > Software > Game > BT4

I want to squeeze and display like the following, if the string does not fit in the width of textbox:

Computer > Software > ...> Python
Computer > Software > Game > BT4

The strings are obtained from an AJAX response. How can I achieve this with jQuery?

Answer 1

This might help you solve your problem:

https://github.com/STAR-ZERO/jquery-ellipsis

or even

http://dotdotdot.frebsite.nl/

Update

Here is what I came up with: Jsfiddle

 appendList = ['Computer', 'Software', 'Programming Language', 'Python']; idx = -1; $('#appendButton').on('click', function() { if (idx++ >= appendList.length-1) return; var inputField = $('#inputField'), value = inputField.val(); inputField.val(value + ((idx == 0) ? appendList[idx]:' > ' + appendList[idx])); value = inputField.val(); // Check the length based on the "size" of the input. if (value.length >= 30) { // Get the last "section" var startPos = (value.lastIndexOf('>')-1), begStr = value.slice(0, startPos - 1), saveStr = value.slice(startPos); // Now we need the last occurrence of '>', // This will give you multiple occurrences of '...' var secStartPos = begStr.lastIndexOf('>')+2; // Or you can use these two lines, instead // of the ones below if you only ever want // one '...', but to always show the last "section" // // var secStartPos = begStr.indexOf('>')+2; // while ((secStartPos = begStr.lastIndexOf('>', secStartPos)+2) >= 30) { }; // var secSaveStr = begStr.slice(0, secStartPos); // Now append '...' secSaveStr += '...'; // Rebuild the string. var finalStr = secSaveStr + saveStr; inputField.val(finalStr); } }); 

Oh yeah BTW, no clue what this does when the text box fills up with '> ... >' :) GL