如何截断字符串并附加省略号 (...)？
我想将
'this is a very long string''this is a ve...'function truncate(input) {
if (input.length > 5) {
return input.substring(0, 5) + '...';
}
return input;
};
或在 ES6 中
const truncate = (input) => input.length > 5 ? `${input.substring(0, 5)}...` : input;
KooiInc对此有一个很好的答案。总结一下：
String.prototype.trunc =
function(n){
return this.substr(0,n-1)+(this.length>n?'…':'');
};
现在你可以做：
var s = 'not very long';
s.trunc(25); //=> not very long
s.trunc(5); //=> not...
如果你更喜欢它作为一个函数，按照@AlienLifeForm的评论：
function truncateWithEllipses(text, max)
{
return text.substr(0,max-1)+(text.length>max?'…':'');
}
这一切都归功于KooiInc。
这会将其限制为您希望限制的行数并且具有响应性
没有人建议的想法，根据元素的高度进行操作，然后从那里剥离它。
小提琴 - https://jsfiddle.net/hutber/u5mtLznf/ <- ES6 version
但基本上你想抓住元素的行高，循环遍历所有文本并在达到特定行高时停止：
'use strict';
var linesElement = 3; //it will truncate at 3 lines.
var truncateElement = document.getElementById('truncateme');
var truncateText = truncateElement.textContent;
var getLineHeight = function getLineHeight(element) {
var lineHeight = window.getComputedStyle(truncateElement)['line-height'];
if (lineHeight === 'normal') {
// sucky chrome
return 1.16 * parseFloat(window.getComputedStyle(truncateElement)['font-size']);
} else {
return parseFloat(lineHeight);
}
};
linesElement.addEventListener('change', function () {
truncateElement.innerHTML = truncateText;
var truncateTextParts = truncateText.split(' ');
var lineHeight = getLineHeight(truncateElement);
var lines = parseInt(linesElement.value);
while (lines * lineHeight < truncateElement.clientHeight) {
console.log(truncateTextParts.length, lines * lineHeight, truncateElement.clientHeight);
truncateTextParts.pop();
truncateElement.innerHTML = truncateTextParts.join(' ') + '...';
}
});
const linesElement=document.getElementById('lines');
const truncateElement=document.getElementById('truncateme');
const truncateText=truncateElement.textContent;
const getLineHeight = function(element) {
const lineHeight = window.getComputedStyle(truncateElement)['line-height'];
if (lineHeight === 'normal') {
// fuck chrome
return 1.16 * parseFloat(window.getComputedStyle(truncateElement)['font-size']);
} else {
return parseFloat(lineHeight);
}
}
linesElement.addEventListener('change', () => {
truncateElement.innerHTML=truncateText
const truncateTextParts= truncateText.split(' ');
const lineHeight = getLineHeight(truncateElement);
const lines = parseInt(linesElement.value);
while(lines * lineHeight < truncateElement.clientHeight) {
console.log(truncateTextParts.length, lines * lineHeight , truncateElement.clientHeight)
truncateTextParts.pop();
truncateElement.innerHTML = truncateTextParts.join(' ') + '...';
}
})
CSS
#truncateme {
width: auto; This will be completely dynamic to the height of the element, its just restricted by how many lines you want it to clip to
}
类似：
var line = "foo bar lol";
line.substring(0, 5) + '...' // gives "foo b..."
这会将省略号置于行的中心：
function truncate( str, max, sep ) {
// Default to 10 characters
max = max || 10;
var len = str.length;
if(len > 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 > 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)
例如：
1234567890 --> 1234...8910
并且：
A really long string --> A real...string
不完美，但实用。请原谅菜鸟的过度评论。
用于防止单词中间或标点符号后面出现点。
let parseText = function(text, limit){
if (text.length > limit){
for (let i = limit; i > 0; i--){
if(text.charAt(i) === ' ' && (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)) // >> 12345...
console.log(parseText("1234567 890",8)) // >> 1234567...
console.log(parseText("1234567 890",15)) // >> 1234567 890最简单灵活的方式：JSnippet DEMO
功能风格：
function truncString(str, max, add){
add = add || '...';
return (typeof str === 'string' && str.length > max ? str.substring(0,max)+add : str);
};
原型：
String.prototype.truncString = function(max, add){
add = add || '...';
return (this.length > max ? this.substring(0,max)+add : this);
};
用途：
str = "testing with some string see console output";
//By prototype:
console.log( str.truncString(15,'...') );
//By function call:
console.log( truncString(str,15,'...') );
function truncate(string, length, delimiter) {
delimiter = delimiter || "…";
return string.length > length ? string.substr(0, length) + 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"
试试这个
function shorten(text, maxLength, delimiter, overflow) {
delimiter = delimiter || "…";
overflow = overflow || false;
var ret = text;
if (ret.length > 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));
});
在 Codepen 上查看工作示例 http://codepen.io/Izaias/pen/QbBwwE
带有 JavaScript 的 HTML：
<p id="myid">My long long looooong text cut cut cut cut cut</p>
<script type="text/javascript">
var myid=document.getElementById('myid');
myid.innerHTML=myid.innerHTML.substring(0,10)+'...';
</script>
结果将是：
My long lo...
干杯
G.
如果您想将字符串切割为指定长度并添加点，请使用
// 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+"...");
或者如果您不想按长度而是按字数来剪切，请使用：
// 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++)
cutted += wordsArray[i] + " "; // Add to cutted word with space
document.write(cutted+"...");
祝你好运...