web-dev-qa-db-ja.com

cssを使用して文字列の一部のみを表示するにはどうすればよいですか？

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

たとえば、文字列がある場合：

'helloworldmynameisryan'

次のように表示したい：

'helloworld...'

私は次のようにdivに文字列を表示しています：

<div>DisplayMessage</div>

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

javascripthtmlcsshide
12
R Doolabh

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

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

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

お役に立てれば。

14
Sushant Sudarshan

Firefoxは実際にこれをサポートするようになりました。「切り捨て」ようとしているものがすべて、ブロックレベルのフォーマットと幅（親になる可能性がある）を持っていることを確認する必要があります。

.Ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: Ellipsis;
    display:block;
    width : 100px; /* this could be defined on any parent */
}
5
Carrie Morrison

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 */
}
_
4
Dipesh Parmar

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

ただし、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/

3
Amrendra

最良の方法は以下を使用することです。

text-overflow: Ellipsis;

あなたのCSSで

これにより、テキストがコンテナの幅に制限されます。テキストが幅を超える場合は、代わりに省略記号（...）で表示されます。

これは役立つかもしれません： https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow

0
Abdelrahman Mahmoud

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

0
Naveen Narale