跨度元素高度問題

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輸入標籤）的高度，你不需要它顯示爲一個表單元格。改爲將其設置爲塊（或內嵌塊）。 要垂直對齊，請使用填充（或行高）。

Answer 2

嘗試用類這樣

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

在CSS

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

你應該用納克綁定跨度標籤。

在這裏閱讀更多信息：https://docs.angularjs.org/api/ng/directive/ngBind