html - 文本溢出省略号不起作用

Question

我知道显示类型 table-cell 不适用于 text - overflow ellipsis 。但这就是我的问题。

我有一个文件输入控件，看起来像

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

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

我试图将显示转换为 block ，但它弄乱了 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 元素不是内联的。

即使是 display:inline-block 也无济于事

.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

Text-overflow ellipsis 在 table-cell 显示中不起作用，因此您可以使用 inline-block:

.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 规则，例如。宽度，表格布局...

引用这个谷歌结果: text overflow on table-cell display .