CSSで長い文字列を切り捨てる:まだ可能ですか?


210

プレーンコンテンツのHTMLとCSSを使用してテキストを切り捨て、動的コンテンツを固定の幅と高さのレイアウトに収める良い方法はありますか?

私は論理的な幅(つまり、盲目的に推測された文字数)でサーバー側を切り捨ててきましたが、「w」は「i」よりも幅が広いため、これは最適ではない傾向があり、再推測する必要があります(そして、調整を続けます)すべての固定幅の文字数。切り詰めは、レンダリングされたテキストの物理的な幅を認識しているブラウザで行われるのが理想的です。

IEには、text-overflow: ellipsis私が望んでいることを正確に実行するプロパティがあることがわかりましたが、これをクロスブラウザーにする必要があります。このプロパティは(ある程度?)標準のようですが、Firefoxではサポートされていません。に基づいてさまざまな 回避策を見つけましたoverflow: hiddenが、省略記号が表示されない(コンテンツが切り捨てられたことをユーザーに知らせたい)か、常に表示します(コンテンツが切り捨てられていなくても)。

固定レイアウトにダイナミックテキストを合わせる良い方法はありますか、または論理幅によるサーバー側の切り捨ては今のところ取得するのと同じくらい良いですか?




回答:


187

更新: Firefox 7(2011年9月27日リリース)からtext-overflow: ellipsisサポートされています。わーい!私の最初の答えは歴史的な記録として続く。

Justin MaxwellはクロスブラウザCSSソリューションを持っています。ただし、Firefoxでテキストを選択できないという欠点があります。これがどのように機能するかについての完全な詳細については、マット・スナイダーのブログ彼のゲスト投稿をチェックしください。

この手法ではinnerHTML、Firefox のプロパティを使用して、JavaScriptでノードのコンテンツを更新することもできません。回避策については、この投稿の最後を参照してください。

CSS

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}

ellipsis.xml ファイルの内容

<?xml version="1.0"?>
<bindings
  xmlns="http://www.mozilla.org/xbl"
  xmlns:xbl="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
    <binding id="ellipsis">
        <content>
            <xul:window>
                <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
            </xul:window>
        </content>
    </binding>
</bindings>

ノードコンテンツの更新

Firefoxで機能するようにノードのコンテンツを更新するには、以下を使用します。

var replaceEllipsis(node, content) {
    node.innerHTML = content;
    // use your favorite framework to detect the gecko browser
    if (YAHOO.env.ua.gecko) {
        var pnode = node.parentNode,
            newNode = node.cloneNode(true);

        pnode.replaceChild(newNode, node);
    }
};

これがどのように機能するかの説明については、Matt Sniderの投稿を参照してください。


それは素晴らしいです、それを指摘してくれてありがとう!選択できないテキストと、切り捨てられたdivに含めることができるコンテンツの制限は残念ですが、一般的には良い解決策のように見えます。
サム・ストークス

私がたった実際のフラストレーションは、スペースが&nbsp;としてレンダリングされることだけなので、インデントは実際には実行できません... = /
マッチ

私もこの同じ問題に遭遇しました。Firefoxがこれをまだ何らかの形でサポートしていないとは信じられません。
mcjabberz 2009

このアプローチは、WebkitとIE8のSELECTコントロールのOPTION要素で機能します。Webkitは私のために何もしていないようで、IE8は省略記号なしでそれをクリップします。
Rajat

のMicrosoftのドキュメントはtext-overflowoption要素のサポートを示していません(msdn.microsoft.com/en-us/library/ms531174(VS.85).aspxの適用先」セクション参照してください)。
Simon Lieschke、2010

45

2014年3月:CSSで長い文字列を切り捨てる:ブラウザーサポートに重点を置いた新しい回答

http://jsbin.com/leyukama/1/のデモ(IEの古いバージョンをサポートしているため、jsbinを使用しています)。

<style type="text/css">
    span {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;     /** IE6+, Firefox 7+, Opera 11+, Chrome, Safari **/
        -o-text-overflow: ellipsis;  /** Opera 9 & 10 **/
        width: 370px; /* note that this width will have to be smaller to see the effect */
    }
</style>

<span>Some very long text that should be cut off at some point coz it's a bit too long and the text overflow ellipsis feature is used</span>

-ms-text-overflow CSSプロパティは必要ありません。これは、text-overflow CSSプロパティの同義語ですが、IEのバージョン6から11までは、text-overflow CSSプロパティをすでにサポートしています。

Windowsブラウザーで(Browserstack.comで)正常にテストされました:

  • IE6からIE11
  • Opera 10.6、Opera 11.1、Opera 15.0、Opera 20.0
  • Chrome 14、Chrome 20、Chrome 25
  • Safari 4.0、Safari 5.0、Safari 5.1
  • Firefox 7.0、Firefox 15

Firefox:Simon Lieschkeが(別の回答で)指摘したように、Firefoxは、Firefox 7以降(2011年9月27日リリース)以降のtext-overflow CSSプロパティのみをサポートしています。

Firefox 3.0およびFirefox 6.0でこの動作を再確認しました(テキストオーバーフローはサポートされていません)。

Mac OS Webブラウザーでさらにテストを行う必要があります。

注:省略記号が適用されているときにマウスホバーにツールチップを表示したい場合があります。これはJavaScriptで実行できます。次の質問を参照してください:HTMLテキストオーバーフローの省略記号の検出HTML-省略記号がアクティブな場合にのみツールチップを表示するには

リソース:


@chiragpatelこのライブデモを編集して、ぜひお試しくださいjsbin.com/leyukama/1
Adrien Be

FF7 <に興味のある人にとっては、最近のFirefoxユーザーの0.05%です
Tom Tom

19

JavaScriptソリューションに問題がない場合は、ブラウザー間でこれを行うためのjQueryプラグインがあります。http://azgtech.wordpress.com/2009/07/26/text-overflow-ellipsis-forを参照してください。 -firefox-via-jquery /


それは間違いなく便利です、ありがとう!Firefoxを除くすべてのブラウザーがCSSプロパティをサポートしているようです。このプラグインを使用すると、JavaScriptを無効にしたFirefoxユーザーだけが機能しなくなります。パフォーマンスへの影響はどのようなものですか?
サム・ストークス

いいえ、申し訳ありません。実際のコードは使用していません。デモで遊んだだけです。デモを取り、同じページに100回カットアンドペーストするのは簡単です。
RichieHindle 2009

2
JavaScriptのtruncate()(jQueryやプロトタイプなどのドット文字列)は、文字幅を考慮しないため、中途半端なソリューションです。したがって、事前に定義された限られたスペースのためにテキストを切り捨てる場合、これらの関数は、等幅フォントを使用する場合にのみ確実に機能します。深刻な解決策は、文字数ではなくグリフで操作する必要があります。
Matthias

@Matthias:おそらく、テストしてからコードが更新されていますが、私はデモを見ただけで、可変幅フォントで完全に動作します。
RichieHindle 2010

7

はい、Firefox 7も実装さtext-overflow: ellipsisれましたtext-overflow: "string"。最終リリースは2011-09-27に予定されています。


6

この問題の別の解決策は、次のCSSルールのセットです。

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

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

上記のCSSの唯一の欠点は、テキストがコンテナをオーバーフローするかどうかに関係なく、「...」が追加されることです。それでも、多数の要素があり、コンテンツがオーバーフローすることが確実な場合は、これがより単純なルールセットになります。

私の2セント。ジャスティン・マクスウェルによるオリジナルのテクニックに脱帽


疑似コードの問題は、テキストがオーバーフローしても「...」が途切れる、または非表示になることです。テキストがオーバーフローする場合は、「...」が表示されることを確認してください。明らかに、そうではありません:(
Antony

@Antony疑似要素を配置するだけですposition: absolute; right: 0;position: relative実際の要素が機能することを忘れないでください)。ただし、テキストと重なるので、背景色を追加することもできます。
最後の子
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.