2

次のようなグループのリストと、各グループごとの研修生の数があるとします。

Math (34)
Physics (22)
Lingvo (33)
...

それらはJSグリッドにリストされ、各レンダラーは CSS スタイルにすることができます。問題は次のとおりです。研修生の数がグループ名と同じになるようにグループのリストを表示する必要がありますが、ウィンドウのサイズを変更 (縮小) すると、研修生の数が列の右側に表示されたままになります。ただし、長いグループ名は次のように省略記号で切り捨てられます。

|Math (34)
|Physics (22)
|Veerryy l..(18)

さらに：

|Math (34)
|Physics (22)
|Veerryy..(18)

サイズを変更すると、これらの 2 つの div (スパン) が互いに重なり合わないようにする必要があります。グリッドの最小幅はわかっているので、最終的には x スクロールになります。

ウィンドウ サイズが復元されると、グループ名は適切に表示され、研修生の数はグループ名のままになります。

|Math (34)
|Physics (22)
|Veerryy long group name (18)

これはCSSで実行できると思いますが、多くのことを試みましたが、まだ成功していません。JSでレンダリングをオーバーロードしたくないので、 CSSを使用することをお勧めします。手伝ってください。

4

2 に答える 2

1

これを省略記号に使用します。

.ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
    width: auto;
}
于 2013-03-04T16:54:39.507 に答える
0

、 、 を使用float:rightして、番号に使用min-widthしたり、タイトル名に使用white-space:nowrapしoverflow:hiddenたりできますtext-overflow:ellipsis。

- 編集 -

さらに、タイトルにmax-widthandを使用してみてください。min-widthデモを見る:

http://jsfiddle.net/DxzuG/

...そして、ニーズに合わせて幅の値をいつでも変更できます。

于 2013-03-04T16:53:13.437 に答える