回答:
基本的に、与えられた文字列の長さをチェックします。指定された長さより長い場合は、n長さn（substrまたはslice）に切り取り、htmlエンティティ…（…）を切り取った文字列に追加します。
そのような方法は次のようになります
function truncate(str, n){
return (str.length > n) ? str.substr(0, n-1) + '…' : str;
};「より洗練された」とは、文字列の最後の単語の境界で切り捨てることを意味する場合は、追加のチェックが必要です。最初に文字列を目的の長さにクリップし、次にその結果を最後の単語の境界にクリップします
function truncate( str, n, useWordBoundary ){
if (str.length <= n) { return str; }
const subString = str.substr(0, n-1); // the original check
return (useWordBoundary
? subString.substr(0, subString.lastIndexOf(" "))
: subString) + "…";
};String関数を使用してネイティブプロトタイプを拡張できます。その場合、strパラメーターを削除strし、関数内をthis次のように置き換える必要があります。
String.prototype.truncate = String.prototype.truncate ||
function ( n, useWordBoundary ){
if (this.length <= n) { return this; }
const subString = this.substr(0, n-1); // the original check
return (useWordBoundary
? subString.substr(0, subString.lastIndexOf(" "))
: subString) + "…";
};もっと独断的な開発者があなたを強く捕らえるかもしれません（「あなたが所有していないオブジェクトを変更しないでください」。私は気にしません）。
Stringプロトタイプを拡張しないアプローチは、提供する（長い）文字列とそれを切り捨てる前述のメソッドを含む独自のヘルパーオブジェクトを作成することです。それが以下のスニペットです。
最後に、CSSを使用できるのは、HTMLノードの長い文字列を切り捨てる場合のみです。それはあなたにあまり制御を与えませんが、実行可能な解決策であるかもしれません。
substrは長さなので、substr(0,n)代わりに最初のn文字に制限する必要があります。
…を実際の省略記号（...）に置き換えることを検討してください。APIを操作するためにこれを使用しようとしている場合は、そこに非HTMLエンティティが必要です。
これはFirefoxでのみ実行する必要があることに注意してください。
他のすべてのブラウザーはCSSソリューションをサポートしています（サポート表を参照）：
p {
white-space: nowrap;
width: 100%; /* IE6 needs any width */
overflow: hidden; /* "overflow" value must be different from visible"*/
-o-text-overflow: ellipsis; /* Opera < 11*/
text-overflow: ellipsis; /* IE, Safari (WebKit), Opera >= 11, FF > 6 */
}皮肉なことに、私はそのコードスニペットをMozilla MDCから取得しました。
white-space: nowrap;。複数行になると、JavaScriptに悩まされます。
Your picture ('some very long picture filename truncated...') has been uploaded.
ロダッシュの切り捨てを使用する
_.truncate('hi-diddly-ho there, neighborino');
// → 'hi-diddly-ho there, neighbo…'_('Hello world').truncate(5); => 'Hello...'('long text to be truncated').replace(/(.{250})..+/, "$1…");どういうわけか、上記のコードは、vuejsアプリでコピーまたは貼り付けられたテキストの種類に対して機能しませんでした。そこで、lodash truncateを使用しましたが、現在は正常に機能しています。
_.truncate('long text to be truncated', { 'length': 250, 'separator': ' '});これが他の提案よりもいくつかの改善点がある私の解決策です：
String.prototype.truncate = function(){
var re = this.match(/^.{0,25}[\S]*/);
var l = re[0].length;
var re = re[0].replace(/\s$/,'');
if(l < this.length)
re = re + "…";
return re;
}
// "This is a short string".truncate();
"This is a short string"
// "Thisstringismuchlongerthan25characters".truncate();
"Thisstringismuchlongerthan25characters"
// "This string is much longer than 25 characters and has spaces".truncate();
"This string is much longer…"それ：
私が見つけた最高の機能。text-ellipsisへのクレジット。
function textEllipsis(str, maxLength, { side = "end", ellipsis = "..." } = {}) {
if (str.length > maxLength) {
switch (side) {
case "start":
return ellipsis + str.slice(-(maxLength - ellipsis.length));
case "end":
default:
return str.slice(0, maxLength - ellipsis.length) + ellipsis;
}
}
return str;
}例：
var short = textEllipsis('a very long text', 10);
console.log(short);
// "a very ..."
var short = textEllipsis('a very long text', 10, { side: 'start' });
console.log(short);
// "...ng text"
var short = textEllipsis('a very long text', 10, { textEllipsis: ' END' });
console.log(short);
// "a very END"現在のすべてのブラウザーは、テキスト行が使用可能な幅を超えた場合に省略記号を自動的に追加するためのシンプルなCSSソリューションをサポートしています。
p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}（これを有効にするには、要素の幅を何らかの方法で制限する必要があることに注意してください。）
https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/に基づいています。
このアプローチはないことに留意すべきでない文字の数に基づいて制限します。複数行のテキストを許可する必要がある場合にも機能しません。
text-direction: rtlとtext-align: left。davidwalsh.name/css-ellipsis-left
最近のほとんどのJavaScriptフレームワーク（jQueryの、プロトタイプ、などが ...）そのハンドルこの文字列を上タックユーティリティ機能を持っています。
これがプロトタイプの例です：
'Some random text'.truncate(10);
// -> 'Some ra...'これは、誰かに処理/維持してほしい機能の1つに思えます。もっとコードを書くのではなく、フレームワークに処理を任せます。
_.truncこれを正確に実行します。
多分誰かがnullを処理している例を見逃したかもしれませんが、nullがあったときに3つのTOP回答が私にとってうまくいきませんでした既存の関数と、他の人に提供するだろうと思った優れた省略記号の回答の1つを使用しました。
例えば
javascript：
news.comments切り捨て関数の使用
news.comments.trunc(20, true);ただし、news.commentsがnullの場合 、「壊れる」
最後の
checkNull(news.comments).trunc(20, true) KooiInc提供のtrunc関数
String.prototype.trunc =
function (n, useWordBoundary) {
console.log(this);
var isTooLong = this.length > n,
s_ = isTooLong ? this.substr(0, n - 1) : this;
s_ = (useWordBoundary && isTooLong) ? s_.substr(0, s_.lastIndexOf(' ')) : s_;
return isTooLong ? s_ + '…' : s_;
};私の単純なnullチェッカー（リテラルの "null"もチェックします（これは、未定義、 ""、null、 "null"などをキャッチします）。
function checkNull(val) {
if (val) {
if (val === "null") {
return "";
} else {
return val;
}
} else {
return "";
}
}ファイル名には番号が付けられている場合があり、インデックスが最初または最後にある場合があります。だから私は文字列の中心から短くしたかった：
function stringTruncateFromCenter(str, maxLength) {
const midChar = "…"; // character to insert into the center of the result
var left, right;
if (str.length <= maxLength) return str;
// length of beginning part
left = Math.ceil(maxLength / 2);
// start index of ending part
right = str.length - Math.floor(maxLength / 2) + 1;
return str.substr(0, left) + midChar + str.substring(right);
}ここでは、UTF-8で1バイトを超えるフィル文字を使用したことに注意してください。
Ext.jsを使用している場合は、Ext.util.Format.ellipsis関数を使用できます。
Kooilncのソリューションに賛成しました。本当に素晴らしいコンパクトなソリューション。対処したい小さなケースが1つあります。誰かが何らかの理由で非常に長い文字シーケンスを入力しても、切り詰められません。
function truncate(str, n, useWordBoundary) {
var singular, tooLong = str.length > n;
useWordBoundary = useWordBoundary || true;
// Edge case where someone enters a ridiculously long string.
str = tooLong ? str.substr(0, n-1) : str;
singular = (str.search(/\s/) === -1) ? true : false;
if(!singular) {
str = useWordBoundary && tooLong ? str.substr(0, str.lastIndexOf(' ')) : str;
}
return tooLong ? str + '…' : str;
}すばやくグーグルでこれを見つけました ...それはあなたのために機能しますか？
/**
* Truncate a string to the given length, breaking at word boundaries and adding an elipsis
* @param string str String to be truncated
* @param integer limit Max length of the string
* @return string
*/
var truncate = function (str, limit) {
var bits, i;
if (STR !== typeof str) {
return '';
}
bits = str.split('');
if (bits.length > limit) {
for (i = bits.length - 1; i > -1; --i) {
if (i > limit) {
bits.length = i;
}
else if (' ' === bits[i]) {
bits.length = i;
break;
}
}
bits.push('...');
}
return bits.join('');
};
// END: truncateテキストのオーバーフロー：省略記号は必要なプロパティです。これと特定の幅のoverflow：hiddenを使用すると、最後に3つのピリオド効果が得られるすべてを超えます... whitespace：nowrapを追加することを忘れないでください。そうしないと、テキストが複数行に配置されます。
.wrap{
text-overflow: ellipsis
white-space: nowrap;
overflow: hidden;
width:"your desired width";
}
<p class="wrap">The string to be cut</p>c_harmの答えは私の意見では最高です。使用したい場合はご注意ください
"My string".truncate(n)リテラルではなく、正規表現オブジェクトコンストラクタを使用する必要があります。また\S、変換時にをエスケープする必要があります。
String.prototype.truncate =
function(n){
var p = new RegExp("^.{0," + n + "}[\\S]*", 'g');
var re = this.match(p);
var l = re[0].length;
var re = re[0].replace(/\s$/,'');
if (l < this.length) return re + '…';
};Kooilncのソリューションの修正：
String.prototype.trunc = String.prototype.trunc ||
function(n){
return this.length>n ? this.substr(0,n-1)+'…' : this.toString();
};これは、切り捨てる必要がない場合、Stringオブジェクトの代わりに文字列値を返します。
私は最近これをしなければならず、次のようになりました：
/**
* Truncate a string over a given length and add ellipsis if necessary
* @param {string} str - string to be truncated
* @param {integer} limit - max length of the string before truncating
* @return {string} truncated string
*/
function truncate(str, limit) {
return (str.length < limit) ? str : str.substring(0, limit).replace(/\w{3}$/gi, '...');
}私に素敵で清潔な感じ:)
どこかスマート：D
//My Huge Huge String
let tooHugeToHandle = `It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).`
//Trim Max Length
const maxValue = 50
// The barber.
const TrimMyString = (string, maxLength, start = 0) => {
//Note - `start` is if I want to start after some point of the string
if (string.length > maxLength) {
let trimmedString = string.substr(start, maxLength)
return (
trimmedString.substr(
start,
Math.min(trimmedString.length, trimmedString.lastIndexOf(' '))
) + ' ...'
)
}
return string
}
console.log(TrimMyString(tooHugeToHandle, maxValue))