跨度元素高度问题

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

尝试像这样的课程

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

在css中

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

你应该使用ng-bind作为span标记。

在此处阅读更多内容：https://docs.angularjs.org/api/ng/directive/ngBind