文本溢出省略号不起作用

Question

我知道显示类型 table-cell 不适用于文本 - 溢出省略号。但这就是我的问题。

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

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

现在，当您 select 一个文件时，文件名应该显示在跨度文本上。

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

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

我试图将显示转换为块显示，但它弄乱了 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

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

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

要在 table 单元格中显示省略号，您应该使用各种 css 规则，例如。宽度，table-布局...

参考此 google 结果： text overflow on table-cell display.

Answer 2

如果您不想更改 display: table-cell，您可以对单元格使用 max-width: 0 技巧。它允许指定 table 可以应用于 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 **/
}

文本溢出省略号不起作用

Text Overflow Ellipsis not working

html

css

overflow