1

スクロール可能なdiv内に含まれる動的テキストに省略記号を追加したいと思います。ただし、テキストが切り捨てられることは望ましくありません。省略記号を追加してから、テキストを次の行に続けたいと思います。これは、divには一度に1行しか表示されないため、省略記号はユーザーにコンテンツがまだあることを通知し、スクロール矢印をクリックして読み続けることになっているためです。

これを行うための最良の方法は何でしょうか？ThreeDots http://tpgblog.com/threedotsは、多くのオプションを備えた非常に優れたプラグインのようですが、必要に応じて構成する方法がわかりません。

あなたが与えることができるどんな助けにも感謝します。

4

1 に答える 1

1

DIV の高さを指定してtext-overflow: ellipsisから、ラインラップ CSS アプローチを使用して防止します。

簡単な例を次に示します。

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

もちろん、問題を起こしている人は常にいますが、今回は Firefox です。ファイルを CSS にバインドする必要があります。

思ったより簡単です。新しいテキスト ファイルを作成して、ellipsis.xml という名前を付けます。次に、参照できる Web サーバー上の任意の場所に貼り付けます。

<?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>

次に、CSS で次のようにします。

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

それは簡単な概要です。詳細については、この男をチェックしてください。

http://mattsnider.com/css/css-string-truncation-with-ellipsis/

ところで: threedots プラグインがより簡単な選択であると思われる場合は、それを選択してください。

于 2011-09-23T03:05:29.290 に答える