文本溢出省略号无效

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>

现在，当您选择文件时，文本名称应显示在范围文本上。

CSS看起来像：

.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;
}

当我们选择一个大文件名时，范围会扩大。它没有虚线......

我尝试将显示转换为块，但它会混淆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元素不是内联的。

甚至显示：内联块没有多大帮助

.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;
}

我想设置span的显示

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

但即使这样也会产生

需要纠正的是什么？

Answer 1

文本溢出省略号在表格单元格显示中不起作用，因此您可以使用内联块：

.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

Answer 2

如果您不想更改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 **/
}