スパン要素の高さの問題

Question

ファイル入力コントロールをカスタマイズしようとしています。私がやったことは選択時にファイル名が表示され

<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> 

この

<span class="file-input-label" ng-model="fileName"></span> 

ました。しかし、それは高さを拡張して、ファイル名がこの

と同様に十分な大きさであればUIは割合から降り、私はそれを幅を与えてみましたが、それはうまくいきませんでした。

.file-input-label { 
    padding: 0px 10px; 
    display: table-cell; 
    vertical-align: middle; 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    height:20px 
} 

どのように動作させるには？

Answer 1

コンテナの高さ（.file-input-label）を知っているので、テーブルセルとして表示する必要はありません。代わりにブロック（またはインラインブロック）として設定してください。 縦に並べるには、パディング（または線の高さ）を使用します。

Answer 2

を使用すると、spanタグのためにNG-バインドを使用する必要があり、CSS

.file-input-label { 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    width: 100px; 
    display: block; 
    overflow: hidden 
} 

でこの

https://plnkr.co/edit/cx8F3V8m3VfK5k9rJclm?p=preview

のようなクラスにしてみてください。

もっと詳しく読む：https://docs.angularjs.org/api/ng/directive/ngBind