스팬 요소 높이 문제

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를

이

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

같은 클래스와

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

을 시도합니다.

더 여기 읽기 : 파일 이름이 너무 긴 경우 https://docs.angularjs.org/api/ng/directive/ngBind