10

では、このマークアップがあるとしましょう。

<div>
  <span>Text one</span>
  <span class="sticky">ABC</span>
</div>
<div>
  <span>Some other text</span>
  <span class="sticky">DEF</span>
</div>
<div>
  <span>Lorem dolor sit amet lorem ipsum dolor</span>
  <span class="sticky">GHI</span>
</div>

付随する CSS を使用すると、以下のような結果が得られます。

ただし、最初のテキストがspanの割り当てられた幅よりも長い場合、問題が発生しますdiv。通常は、通常のテキスト ラッピングが行われます。2 番目spanは 2 番目の行の最後にぶつかります。

ただし、この要素は 1 行だけにしたいと考えています。もちろん、これを達成するには、そうします。

white-space: nowrap;
overflow: hidden;

しかし、その後span、最初のテキストの長さによって追い払われるため、2番目が忘却の中に消えてしまいますspan。

私が達成したいのは、以下の 3 番目の例に示されているものです。最初のコンテンツspanが表示するには長すぎる場合text-overflow: ellipsis;、文字列をドット ドット ドットで切断し、2 番目のコンテンツをspan右端 (許容範囲)paddingにプッシュします。div

max-width基本的に、最初の疑似はspanの幅に等しくなり、divそれを除外しpaddingて の幅を差し引きspan.stickyます (内容が異なる可能性があるため、幅は設定されません)。

max-widthこのようなものにアプローチするときに実際に行くべきかどうかはわかりませんが、それは私が望む動作を最もよく説明するために使用できるものです.

これを達成するJS以外の方法はありますか？

例

4

2 に答える 2

11

これは間違いなく可能であり、CSSで実行する必要があります。最初のスパンに固定幅と固定高さを適用します。高さはそれが複数の線に伸びないようにします。その後、.stickyスパンを配置できます。これは、パーセントまたはemsを使用して、流動的にすることもできます。考慮すべき点として、「ABC」、「DEF」のコンテキストはわかりませんが、構造要素ではなく純粋に視覚的なものである場合は、：beforeまたは：after疑似クラスを使用して適用する方がよい場合があります。

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

div { 
    width: 200px; /* some amount that you set */
}
span:not(.sticky) { /* can use another selector, just wanted it to be exceptionally clear what i was referring to here */
    display: inline-block; /* so height and width actually take affect */
    max-width: 80%;
    height: 1em; /* so overflow hidden works and keeps text on one row */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* important to show ellipsis, or words will just be broken off */
}
span.sticky {
    display: inline-block;
    width: 20%;
}

これがライブサイトで機能するのを見たい場合は、moolta.comでこのデザインを行いました。「チャレンジする」をクリックし、モーダルを開いて友達を選択します。ドロップダウンリスト内のliは、私が話しているものです。彼らは省略記号になり、線を壊さずにボタンをフォローする必要がありました

于 2013-01-08T22:24:52.147 に答える
2 
<html>
  <head>
    <style>
      .left {
        max-width: 200px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .right {
        float: right;
      }
    </style>
  </head>
  <body>
    <div class="left">
      <div class="right">FOO</div>
      Lorem
    </div>
    <br />
    <div class="left">
      <div class="right">FOO</div>
      Lorem ipsum
    </div>
    <br />
    <div class="left">
      <div class="right">FOO</div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit
    </div>
  </body>
</html>
于 2014-03-04T00:38:24.837 に答える