javascript - div のコンテンツをラップして、最後に … を追加する方法は?

Question

私はdivコンテンツを表示するものを持っています。私の要件は、10文字を超える場合は表示する必要があることです

10 characters + '...'

PHPだけでなくjQueryも使えます。

Answer 1

表示されるテキストを 10 文字のみに制限するには、フォント設定に基づいてテキスト幅を計算する必要があるため、注意が必要です。

em のような単位を使用する場合、これを気にする必要はなく、表示されるテキストは希望する幅とほぼ同じになります。

これの編集可能な例があります:

http://jsfiddle.net/flaviocysne/88nLY/2/

これらのサイトの例に基づいて:

http://www.quirksmode.org/css/textoverflow.html

http://davidwalsh.name/css-ellipsis

Answer 2

PHP を使用する場合は、関数substr($text, $start, $length)を使用できます。ドキュメントは次のようになります。

<?php

$test = "Lorem ipsum dolor sit amet consectetur adipisici";
// fonction to split the part of text if necessary
$result = strlen($test)>10 ? substr($test, 0, 10).'....': $test;
// to display the text: and don't check the length of string
echo $result;

したがって、 jQuery では、ドキュメントを部分的に拡張する必要があります。ここでは、次の ようにします。

$(document).ready(function() {
 let text = "Lorem ipsum dolor sit amet consectetur adipisici"
 let result = text.length > 10 ? text.substr(0, 10)+"..." : text;
 
 alert(result);
});

お役に立てば幸いです