文本溢出省略号不起作用答案

【问题标题】：Text Overflow Ellipsis not working文本溢出省略号不起作用
【发布时间】：2016-07-05 06:26:48
【问题描述】：

我知道显示类型 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>

现在，当您选择文件时，文件名应显示在跨度文本上。

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 元素不是内联的。

即使是 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;">

但即使这样也会产生

需要纠正什么？

【问题讨论】：

您尝试过max-width: 0 技巧吗？它应该放在table-cell 规则中。
@MarcosPérezGude ... wowww ... 先生 :) 你是个天才。
所以让我添加一个答案，您接受其他不能解决问题的答案。
@StrugglingCoder- 已添加答案:)

标签： html css overflow

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

参考这个谷歌搜索结果： text overflow on table-cell display.

【讨论】：

你没有在span中定义类file-input-label。

【解决方案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 **/
}

【讨论】：