4

span要素内にある要素に省略記号を付けようとしていtdます。span問題は、要素に固定幅、つまりピクセル単位の幅を指定した場合にのみ、省略記号が機能することです。しかし、私のプロジェクトでは、span要素に固定幅を使用できません。要素は、 を使用して可能になるそれぞれの要素内spanで完全に引き伸ばされる必要があります。tdwidth: 100%

私の質問はspan次のとおりです:要素を完全に要素内に引き伸ばすことによって、省略記号をうまく機能させるにはどうすればよいtdですか?

span {
    width: 100%;    /* In pixels, it is working fine */
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow:hidden;
}

ここにフィドルがあります

純粋なcss、javascript、またはjQueryのソリューションを探しています。このソリューションは IE8+ および firefox で動作するはずです。

PS: プロジェクトの制限により、スパンの幅を動的に計算できません。

EDIT : td 要素にサイズ変更可能な列を実装しているため、td 要素の幅を制限できません。

4

3 に答える 3

4

つまり、これを追加する必要があります。

table {
    width: 100%;
    table-layout:fixed;
}

原因は要素ではありませんspanが、表のtd要素には 33% 幅が定義されていないため、コンテンツの幅に応じて拡張されtdます。table-layout:fixed;それらを固定幅にするには、ルールをに適用する必要がありますtable。

ライブ フィドル: http://jsfiddle.net/m5gGr/

于 2013-07-12T07:01:36.107 に答える
2

これがあなたを助けることを願っています

.parent-div {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
}

.text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;        
    min-width: 0;
}

.icon {
    -webkit-flex: 1;
    -moz-flex: 1;
    flex: 1;
}

デモ

box-flex プロパティの詳細

于 2013-07-12T07:02:08.393 に答える
1

max-widthプロパティをtd要素に追加できる可能性があります。

th, td {
    width: 33%;
    border: 1px solid black;
    max-width:200px;
}

これがjsFiddleです

于 2013-07-12T07:06:56.647 に答える