13

10文字までの文字列を表示できるようにしたい。文字列が 10 文字を超える場合は、末尾に「...」を追加したいと考えています。

たとえば、次の文字列があるとします。

'helloworldmynameisryan'

私はそれを次のように表示したい：

'helloworld...'

次のように、文字列を div に表示しているだけです。

<div>DisplayMessage</div>

文字列が 10 文字を超える場合にのみ適用される、作成できるクラスはありますか?

4

7 に答える 7

15

残念ながら、CSS のみを使用してこれを行うための適切なクロス ブラウザーの方法はありません。「text-overflow」は、必要に応じて文字列の長さではなく、文字列の幅に依存します。

これを実現するには、JavaScript で文字列の .length プロパティを使用できます。

function ellipsify (str) {
    if (str.length > 10) {
        return (str.substring(0, 10) + "...");
    }
    else {
        return str;
    }
}

お役に立てれば。

于 2013-03-14T04:38:47.090 に答える
7

実際、Firefox はこれをサポートするようになりました。「切り捨て」ようとしているものに、ブロック レベルの書式設定と幅 (親である可能性があります) があることを確認する必要があります。

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display:block;
    width : 100px; /* this could be defined on any parent */
}
于 2013-03-14T05:45:11.470 に答える
4

serversideスクリプトを使用しjavascriptないと、これを行うことはできません。

以下の関数を使用します。

function LimitCharacter($data,$limit = 20)
{
    if (strlen($data) > $limit)
    {
        $data = substr($data, 0, strrpos(substr($data, 0, $limit), ' ')) . '...';
        return $data;
    }
    else
    {
        return $data;
    }
}

と呼ぶLimitCharacter($yourString,5);

Javascript

var str = 'Some very long string';
if(str.length > 10) str = str.substring(0,10)+"...";

CSS

.limtiCharClass {
    -o-text-overflow: ellipsis;   /* Opera */
    text-overflow:    ellipsis;   /* IE, Safari (WebKit) */
    overflow:hidden;              /* don't show excess chars */
    white-space:nowrap;           /* force single line */
    width: 300px;                 /* fixed width */
}
于 2013-03-14T04:27:16.667 に答える
3

これは省略記号と呼ばれ、ブロック要素で使用できます。

ただし、Firefox では機能せず、CSS で幅を文字単位で指定できないため、幅を正確に 10 文字に設定することはできません。

正確に 10 文字と Firefox との互換性が必要な場合は、javascript またはサーバー側のソリューションを使用する必要があります。

省略記号を確認してください: http://www.quirksmode.org/css/textoverflow.html

またはこれを試してください：

.ellipsis{
 white-space:nowrap;
 overflow:hidden;
}

.ellipsis:after{
  content:'...';
}

このためのjQueryプラグイン：

http://devongovett.wordpress.com/2009/04/06/text-overflow-ellipsis-for-firefox-via-jquery/

于 2013-03-14T04:27:10.407 に答える
0

省略記号は css3 関数であり、さまざまなブラウザーでテストすると問題が発生します。簡単な回避策は、オーバーフローを非表示にして div またはスパンに特定の with を定義し、「...」という背景画像を追加することです。

于 2013-03-14T04:29:28.413 に答える
-1

quirksmodeによると、次のような長いテキストがある場合 

 <div>11111111111111111111111111111111111111111111111111111111</div>

これをラップするには、多くの方法があります。<wbr>以下のようなタグ を使用します

 <div>111111111111111111111111111<wbr>11111111111111111111111111111</div>


111111111111111111111 111111111111111111111のように表示されるか、&shy;の代わりに使用すると、出力は 

 111111111111111111111-
 1111111111111111111111

または、JS ソリューションを探している場合は、これを使用してください。

于 2013-03-14T04:36:06.950 に答える