テキストオーバーフロー省略記号が機能しない

Question

私は表示タイプを知っています。table-cellはテキストオーバーフロー省略記号では機能しません。しかし、これは私の問題のようなものです。

私はあなたのファイル名がスパンテキストに表示されるべきファイルを選択すると

今

<div class="ui-select form-input" style="display:inline-block; margin-right:5px; margin-bottom:-8px;width:400px;"> 
    <span class="input-group-btn"> 
     <label class="btn btn-info btn-file" for="multiple_input_group"> 
      <div class="input required"> 
       <input id="multiple_input_group" type="file" multiple name="files" ng-files="getTheFiles($files)"> 
      </div> Browse 
     </label> 
    </span> 
    <span class="file-input-label" ng-model="fileName"></span> 
</div> 

のように見えるファイル入力制御を持っています。私たちは、大きなファイル名を選択すると、スパンが

.file-input-label { 
    padding: 0px 10px; 
    display: table-cell; 
    white-space:nowrap; 
    vertical-align: middle; 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    overflow:hidden; 
    text-overflow:ellipsis; 
} 

を展開します：

CSSは次のようになります。それは私がブロックするようにディスプレイを変換しようとした

...点線が付属していませんが、それはUI

.file-input-label { 
    padding: 0px 10px; 
    display: block; 
    width:400px; 
    height:20px; 
    white-space:nowrap; 
    vertical-align: middle; 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    overflow:hidden; 
    text-overflow:ellipsis; 
} 

を台無し彼らブラウズボタンとスパン要素はインラインではありません。

でも表示：私はスパンの表示

<span class="input-group-btn" style="display:inline-block;"> 

それでも、これは

生成を設定することが考え

.file-input-label { 
    padding: 0px 10px; 
    display: inline-block; 
    white-space:nowrap; 
    width:400px; 
    height:30px; 
    vertical-align: middle; 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    overflow:hidden; 
    text-overflow:ellipsis; 
} 

くらいのインラインブロックは助けにはならなかった何修正する必要がありますか？

Answer 1

display: table-cellを変更しない場合は、max-width: 0のトリックをセルに追加することができます。 text-overflowを適用できるテーブルを指定することができます。あなたの変更は次のようになります：

.file-input-label { 
    padding: 0px 10px; 
    display: table-cell; 
    white-space:nowrap; 
    vertical-align: middle; 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    overflow:hidden; 
    text-overflow:ellipsis; 
    max-width: 0; /** the only needed change **/ 
} 

Answer 2

あなたはインラインブロックを使用することができますので、

テキストオーバーフローの省略記号は、テーブルセルの表示では動作しません。

.file-input-label { 
    padding: 0px 10px; 
    display: inline-block; 
    white-space:nowrap; 
    vertical-align: middle; 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    overflow:hidden; 
    text-overflow:ellipsis; 
} 

---

テーブルセルの表示に省略記号を作成するには、あなたがの種類を使用する必要があります例えば、CSSルール。幅、表レイアウト...

このGoogleの結果を参照してください： text overflow on table-cell display