1

左側のテキストと右側のアクション要素で構成されるリスト エントリのスタイルを設定しようとしています。テキストが長くなる場合、使用可能なスペースのテキストは省略記号に置き換えられます。

 - This is a list entry with text that is… [>]

リスト エントリにカーソルを合わせると、次のようなアクション要素がさらに表示されます。

 - This is a list entry with text tha… [x] [>]

JS に依存するのではなく、CSS のみのソリューションを希望します。

これは私が思いついたものですhttp://jsfiddle.net/rBthS/265/ しかし、どういうわけか私は何かが足りないと感じています。

もっとまっすぐな道があるはずです。手伝ってくれますか？

4

2 に答える 2

1

これについてもう少し考えた後、私が探していたより簡単な解決策はこれですhttp://jsfiddle.net/rBthS/272/

<ul>
  <li>
    <div style="float: right;">Foo Bar</div>
    <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
      More text then this can handle …
    </div>
  </li>
  <li>…&lt;/li>
</ul>
于 2013-07-01T15:18:50.120 に答える
0

FF 用の xml を追加する必要があります。これはCSSコードです:

white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; -moz-binding: url('path_to_xml/ellipsis.xml#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>

FF、Chrome、Opera、Safari、IE でテストしましたが、動作します。

これについては、ここに全体の投稿があります。

于 2013-06-30T10:52:29.683 に答える