How jquery controls the length of a control's text _jquery

In Web project development, there are times when the control is exploded with text content, but how do you control the contents of the control's text? Some people may use the substring in JavaScript to control the text displayed by the control, but because of the letter case, Chinese characters, other languages, and so on each character size is not the same, which led to the same substring (0, 10), some small, some content large, When you want to use CSS to control the width of a control, sometimes it does not work, unless you are very proficient in CSS, otherwise it is difficult to control the text content in the control through the CSS, the following method can solve this problem.

HTML content, the text in H2 is controlled through jquery:

<H2 class= "Test" > 
 

For example, H2 content for this is a test content, more other content please check the author blog! , but the control is not long enough, directly put the control, want to show some content, the rest of the content with ... Said. If the style of the H2 control is already controlled by CSS, you can do this:

HTML content modification, the CSS style of the span control is not controlled:

<H2 class= "test" ><span class= "Test_span" ></span> 
 

The jquery notation is:

var str = ' This is a test content, more other content please check the author blog! ';
var threshold = m;
for (var i = 1; i < str.length i++) {
var subStr = str.substring (0, i);
$ ('. Test_span '). Text (SUBSTR);
if ($ ('. Test_span '). Width () > Threshold) {
$ ('. Test_span '). Text (subStr + ' ... ');
break;
}
}

The above method determines the number of characters to display based on the current width of the control, so that the control is not exploded and the string is displayed to the maximum extent.

The above is a small set to introduce the jquery control control text length, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!