1

CSS を介してコマンドを実行する人にとって、非常に小さな問題があります。次のマークアップがあります。

<li>
 <div>
  <span>Some text</span>
  <span>Some large amount of text</span>
 </div>
<li>

そしてcssは次のとおりです。

li
{
  width: 150px;
  height: 100px;
}

今、大量のテキストを含む 2 番目のスパン内に省略記号を表示したいと考えています。これどうやってするの ？

誰でも私を助けてもらえますか？

4

5 に答える 5

1

s のスタイリング方法を見せてくれた理由はわかりませんliが…</p> 

<style>
li > span:nth-child(2):before {
    content: '\2026\0020';
}
</style>
<li>
    <span>Some text</span>
    <span>Some large amount of text</span>
</li>

Unicode では、U+2026 は横の省略記号で、U+0020 はスペースです。

デモ: http://jsfiddle.net/5xWhx/

于 2013-04-20T12:43:35.417 に答える
1

構造が常にマークアップしたようなものであると仮定すると（そうでない場合は、クラスを使用できます-おそらくとにかくより良いアプローチです）、nth-childセレクターと:after（または::after）疑似要素を使用できます。次のようにできます。

<ul>
<li>
 <div>
  <span>Some text</span>
  <span>Some large amount of text</span>
 </div>
 </li>
 </ul>

CSS:

/* Hide the text in the second span */
li span:nth-child(2){
    display:block;
    overflow:hidden;
    text-indent:100%;
    white-space:nowrap;
}

/* Create a pseudo-element after the first span with an ellipsis (UTF-8) as its content */
li span:nth-child(1):after{
    content:" \2026";
}

jsFiddle の例

于 2013-04-20T12:52:56.217 に答える
0

このプラグインを試してください -

http://plugins.jquery.com/ellipsis/

$('#target').ellipsis({
    row: 2,
    char: '**'
});

この方法を試すこともできます (完全にはサポートされていません) 。

span{
    /* essential */
    text-overflow: ellipsis;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;

    /* for good looks */
    padding: 10px;
}
于 2013-04-20T12:30:01.443 に答える
0

あなたの例から、notの動的ソリューションが必要かどうかはわかりません。いくつか質問があります


  • コンテナーが表示できるよりも多くのテキストが常に存在することを確実に知っていますか?
  • 2 番目のスパンのこのテキストは、1 行または複数行でのみ表示されますか?

これはtext-overflow:ellipsis;、単一行でのみ機能し、次の組み合わせでのみ機能するためです。white-space:nowrap;

于 2013-04-20T15:00:59.957 に答える