0

私はこのようなものを持っています:

<p id="container">
  <span id="t1">This could be a very long text </span>
  <span id="t2">&#160;suffix 1</span>
  <span id="t3">&#160;suffix 2</span>
</p>

私がやりたいことは、#container に使用できるスペースに応じて、最初のスパンに省略記号を追加して、次のような結果になることです。

これは非常に長いテキスト suffix 1 suffix 2 // すべてに十分なスペースがある場合。

これは非常に長い... suffix 1 suffix 2 // すべてに十分なスペースがない場合。

これは v... suffix 1 suffix 2 // 空き容量がさらに少ない場合。

ご覧のとおり、サフィックスのスペースは常に保持し、最初のスパン テキストのみに省略記号を適用する必要があります。

よろしくお願いします！;-)

4

2 に答える 2

0

私が言ったように、当分の間、私が見つけた最善の解決策は Javascript ベースです。参照: http://jsbin.com/aregeq/4/edit

于 2012-12-12T18:59:39.873 に答える
0

CSSプロパティを使用してこれを実現できますtext-overflow:ellipsis

#t1 {
  display:inline-block;
  text-overflow: ellipsis;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
}

ここで使用方法に関する完全なリファレンス/チュートリアルを見つけることができます: http://davidwalsh.name/css-ellipsis

于 2012-12-11T18:50:22.313 に答える