blocks|key|821390|text|function+truncate(input)+{
+++if+(input.length+>+5)+{
++++++return+input.substring(0,+5)+%2B+'...';
+++}
+++return+input;
};|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|821391|或在ES6中|unstyled|821392|const+truncate+=+(input)+=>+input.length+>+5+?+`${input.substring(0,+5)}...`+:+input;|821393|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre class="lang-js prettyprint-override"><code>function truncate(input) {
 if (input.length &gt; 5) {
 return input.substring(0, 5) + '...';
 }
 return input;
};
</code></pre>
or in ES6
<pre class="lang-js prettyprint-override"><code>const truncate = (input) =&gt; input.length &gt; 5 ? `${input.substring(0, 5)}...` : input;
</code></pre>

blocks|key|1036407|text|类似于：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1036408|var+line+=+"foo+bar+lol";
line.substring(0,+5)+%2B+'...'+//+gives+"foo+b..."|code-block|syntax|javascript|1036409|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Something like:

<pre><code>var line = "foo bar lol";
line.substring(0, 5) + '...' // gives "foo b..."
</code></pre>

blocks|key|1036679|text|用于防止单词中间或标点符号后面的点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1036680|​|1036681|let+parseText+=+function(text,+limit){
++if+(text.length+>+limit){
++++++for+(let+i+=+limit;+i+>+0;+i--){
++++++++++if(text.charAt(i)+===+'+'+&&+(text.charAt(i-1)+!=+','%7C%7Ctext.charAt(i-1)+!=+'.'%7C%7Ctext.charAt(i-1)+!=+';'))+{
++++++++++++++return+text.substring(0,+i)+%2B+'...';
++++++++++}
++++++}
+++++++return+text.substring(0,+limit)+%2B+'...';
++}
++else
++++++return+text;
};
++++
++++
console.log(parseText("1234567+890",5))++//+>>+12345...
console.log(parseText("1234567+890",8))++//+>>+1234567...
console.log(parseText("1234567+890",15))+//+>>+1234567+890|code-block|syntax|javascript|1036682|1036683|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

For preventing the dots in the middle of a word or after a punctuation symbol.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>let parseText = function(text, limit){
 if (text.length &gt; limit){
 for (let i = limit; i &gt; 0; i--){
 if(text.charAt(i) === ' ' &amp;&amp; (text.charAt(i-1) != ','||text.charAt(i-1) != '.'||text.charAt(i-1) != ';')) {
 return text.substring(0, i) + '...';
 }
 }
 return text.substring(0, limit) + '...';
 }
 else
 return text;
};
 
 
console.log(parseText("1234567 890",5)) // &gt;&gt; 12345...
console.log(parseText("1234567 890",8)) // &gt;&gt; 1234567...
console.log(parseText("1234567 890",15)) // &gt;&gt; 1234567 890</code></pre>
</div>
</div>

blocks|key|1036596|text|这将把省略号放在行的中心：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1036597|function+truncate(+str,+max,+sep+)+{

++++//+Default+to+10+characters
++++max+=+max+%7C%7C+10;

++++var+len+=+str.length;
++++if(len+>+max){

++++++++//+Default+to+elipsis
++++++++sep+=+sep+%7C%7C+"...";

++++++++var+seplen+=+sep.length;

++++++++//+If+seperator+is+larger+than+character+limit,
++++++++//+well+then+we+don't+want+to+just+show+the+seperator,
++++++++//+so+just+show+right+hand+side+of+the+string.
++++++++if(seplen+>+max)+{
++++++++++++return+str.substr(len+-+max);
++++++++}

++++++++//+Half+the+difference+between+max+and+string+length.
++++++++//+Multiply+negative+because+small+minus+big.
++++++++//+Must+account+for+length+of+separator+too.
++++++++var+n+=+-0.5+*+(max+-+len+-+seplen);

++++++++//+This+gives+us+the+centerline.
++++++++var+center+=+len/2;

++++++++var+front+=+str.substr(0,+center+-+n);
++++++++var+back+=+str.substr(len+-+center+%2B+n);+//+without+second+arg,+will+automatically+go+to+end+of+line.

++++++++return+front+%2B+sep+%2B+back;

++++}

++++return+str;
}

console.log(+truncate("123456789abcde")+);+//+123...bcde+(using+built-in+defaults)+
console.log(+truncate("123456789abcde",+8)+);+//+12...cde+(max+of+8+characters)+
console.log(+truncate("123456789abcde",+12,+"_")+);+//+12345_9abcde+(customize+the+separator)+|code-block|syntax|javascript|1036598|例如：|1036599|1234567890+-->+1234...8910|1036600|和：|1036601|A+really+long+string+-->+A+real...string|1036602|不是很完美，但很实用。请原谅我的过度评论。为新手准备的。|1036603|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

This will put the ellipsis in the center of the line:

<pre><code>function truncate( str, max, sep ) {

 // Default to 10 characters
 max = max || 10;

 var len = str.length;
 if(len &gt; max){

 // Default to elipsis
 sep = sep || "...";

 var seplen = sep.length;

 // If seperator is larger than character limit,
 // well then we don't want to just show the seperator,
 // so just show right hand side of the string.
 if(seplen &gt; max) {
 return str.substr(len - max);
 }

 // Half the difference between max and string length.
 // Multiply negative because small minus big.
 // Must account for length of separator too.
 var n = -0.5 * (max - len - seplen);

 // This gives us the centerline.
 var center = len/2;

 var front = str.substr(0, center - n);
 var back = str.substr(len - center + n); // without second arg, will automatically go to end of line.

 return front + sep + back;

 }

 return str;
}

console.log( truncate("123456789abcde") ); // 123...bcde (using built-in defaults) 
console.log( truncate("123456789abcde", 8) ); // 12...cde (max of 8 characters) 
console.log( truncate("123456789abcde", 12, "_") ); // 12345_9abcde (customize the separator) 
</code></pre>

For example:

<pre><code>1234567890 --&gt; 1234...8910
</code></pre>

And:

<pre><code>A really long string --&gt; A real...string
</code></pre>

Not perfect, but functional. Forgive the over-commenting... for the noobs.

blocks|key|1036546|text|function+truncate(string,+length,+delimiter)+{
+++delimiter+=+delimiter+%7C%7C+"&hellip;";
+++return+string.length+>+length+?+string.substr(0,+length)+%2B+delimiter+:+string;
};

var+long+=+"Very+long+text+here+and+here",
++++short+=+"Short";

truncate(long,+10);+//+->+"Very+long+..."
truncate(long,+10,+">>");+//+->+"Very+long+>>"
truncate(short,+10);+//+->+"Short"|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1036547|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>function truncate(string, length, delimiter) {
 delimiter = delimiter || "&amp;hellip;";
 return string.length &gt; length ? string.substr(0, length) + delimiter : string;
};

var long = "Very long text here and here",
 short = "Short";

truncate(long, 10); // -&gt; "Very long ..."
truncate(long, 10, "&gt;&gt;"); // -&gt; "Very long &gt;&gt;"
truncate(short, 10); // -&gt; "Short"
</code></pre>

blocks|key|1036632|text|尝尝这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1036633|function+shorten(text,+maxLength,+delimiter,+overflow)+{
++delimiter+=+delimiter+%7C%7C+"&hellip;";
++overflow+=+overflow+%7C%7C+false;
++var+ret+=+text;
++if+(ret.length+>+maxLength)+{
++++var+breakpoint+=+overflow+?+maxLength+%2B+ret.substr(maxLength).indexOf("+")+:+ret.substr(0,+maxLength).lastIndexOf("+");
++++ret+=+ret.substr(0,+breakpoint)+%2B+delimiter;
++}
++return+ret;
}

$(document).ready(function()+{
++var+$editedText+=+$("#edited_text");
++var+text+=+$editedText.text();
++$editedText.text(shorten(text,+33,+"...",+false));
});|code-block|syntax|javascript|1036634|在Codepen+http://codepen.io/Izaias/pen/QbBwwE上签出一个工作示例|offset|length|1036635|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/Izaias/pen/QbBwwE^0|0|0|9|Z|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Try this

<pre><code>function shorten(text, maxLength, delimiter, overflow) {
 delimiter = delimiter || "&amp;hellip;";
 overflow = overflow || false;
 var ret = text;
 if (ret.length &gt; maxLength) {
 var breakpoint = overflow ? maxLength + ret.substr(maxLength).indexOf(" ") : ret.substr(0, maxLength).lastIndexOf(" ");
 ret = ret.substr(0, breakpoint) + delimiter;
 }
 return ret;
}

$(document).ready(function() {
 var $editedText = $("#edited_text");
 var text = $editedText.text();
 $editedText.text(shorten(text, 33, "...", false));
});
</code></pre>

Checkout a working sample on Codepen
<a href="http://codepen.io/Izaias/pen/QbBwwE" rel="nofollow">http://codepen.io/Izaias/pen/QbBwwE</a>

blocks|key|1036453|text|带有JavaScript的超文本标记语言：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1036454|<p+id="myid">My+long+long+looooong+text+cut+cut+cut+cut+cut

<script+type="text/javascript">
var+myid=document.getElementById('myid');
myid.innerHTML=myid.innerHTML.substring(0,10)%2B'...';
</script>|code-block|syntax|javascript|1036455|结果将是：|1036456|My+long+lo...|1036457|干杯|1036458|G.|1036459|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

HTML with JavaScript:

<pre><code>&lt;p id="myid"&gt;My long long looooong text cut cut cut cut cut&lt;/p&gt;

&lt;script type="text/javascript"&gt;
var myid=document.getElementById('myid');
myid.innerHTML=myid.innerHTML.substring(0,10)+'...';
&lt;/script&gt;
</code></pre>

The result will be:

<pre><code>My long lo...
</code></pre>

Cheers

G.

blocks|key|1036532|text|如果想要剪切指定长度的字符串并添加点，请使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1036533|//+Length+to+cut
var+lengthToCut+=+20;

//+Sample+text
var+text+=+"The+quick+brown+fox+jumps+over+the+lazy+dog";

//+We+are+getting+50+letters+(0-50)+from+sample+text
var+cutted+=+text.substr(0,+lengthToCut+);
document.write(cutted%2B"...");|code-block|syntax|javascript|1036534|或者，如果您不想按长度而是按字数计算，请使用：|1036535|//+Number+of+words+to+cut
var+wordsToCut+=+3;

//+Sample+text
var+text+=+"The+quick+brown+fox+jumps+over+the+lazy+dog";

//+We+are+splitting+sample+text+in+array+of+words
var+wordsArray+=+text.split("+");

//+This+will+keep+our+generated+text
var+cutted+=+"";
for(i+=+0;+i+<+wordsToCut;+i%2B%2B)
+cutted+%2B=+wordsArray[i]+%2B+"+";+//+Add+to+cutted+word+with+space

document.write(cutted%2B"...");|1036536|祝你好运。|1036537|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

If you want to cut a string for a specifited length and add dots use

<pre><code>// Length to cut
var lengthToCut = 20;

// Sample text
var text = "The quick brown fox jumps over the lazy dog";

// We are getting 50 letters (0-50) from sample text
var cutted = text.substr(0, lengthToCut );
document.write(cutted+"...");
</code></pre>

Or if you want to cut not by length but with words count use:

<pre><code>// Number of words to cut
var wordsToCut = 3;

// Sample text
var text = "The quick brown fox jumps over the lazy dog";

// We are splitting sample text in array of words
var wordsArray = text.split(" ");

// This will keep our generated text
var cutted = "";
for(i = 0; i &lt; wordsToCut; i++)
 cutted += wordsArray[i] + " "; // Add to cutted word with space

document.write(cutted+"...");
</code></pre>

Good luck...

I'm looking for a simple script which can truncate a string with ellipsis (...)

I want to truncate something like <code>'this is a very long string'</code> to <code>'this is a ve...'</code>

I don't want to use CSS or PHP.

I want to truncate a text or line with ellipsis using JavaScript

我正在寻找一个简单的脚本，可以截断一个字符串与省略号(...)我想将诸如'this is a very long string'之类的内容截断为'this is a ve...'我不想使用CSS或PHP。

问我想使用JavaScript截断带有省略号的文本或行
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我想使用JavaScript截断带有省略号的文本或行EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我想使用JavaScript截断带有省略号的文本或行
EN