如何截断字符串并添加省略号(...)?
我想将类似于 'this is a very long string' 的内容截断为 'this is a ve...'。
我想将类似于 '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;
…
这个专门用于省略号的字符,其中点之间的空格会稍微变窄。 - st_phanKooiInc对此有很好的回答。总结一下:
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。
function truncateWithEllipses(text, max) {return text.substr(0,max-1)+(text.length>max?'…':''); }
。该函数可以截取文本并在末尾加上省略号,以使其长度不超过指定的最大值。 - Alien Life Formexport const characterLimit = (text, limit) => text.length > limit ? (text.substr(0, limit - 1).trim() + '...') : text;
- AntontruncateWithEllipses = (text, max, ending = '…') => text.length > max ? text.substr(0, max - ending.length) + ending : text;
- Kévin Berthommierending
参数,那么可能不应该称其为 truncateWithEllipses
,因为你可以更改 ending
是什么,然后它就不再是 WithEllipses
了。 - Joshua Pinter这将限制它显示为你想要的行数,并且具有响应式的特性。
一个没有人提出的想法是,根据元素的高度来进行限制,然后再进行适当的调整。
Fiddle - https://jsfiddle.net/hutber/u5mtLznf/ <- ES6 版本
但基本上你想要获取元素的行高,循环遍历所有的文本,并在达到一定行高时停止:
'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(' ') + '...';
}
})
#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
return text.substring(0, limit) + '...';
这一行代码。我编辑了你的答案并在你的代码中添加了那行代码和一些其他微小的变化。如果没有那行代码,parseText("1234567 890",5)
会返回undefined
,但现在它运行得很好。 - Ramin Bateni最简单和灵活的方式: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
HTML与JavaScript:
<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.