文本溢出省略号不起作用

我知道显示类型表格单元格不适用于文本溢出省略号。但这就是我的问题所在。文本溢出省略号不起作用

我有一个看起来像

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

即使显示：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 class="input-group-btn" style="display:inline-block;">

但即使这样产生

什么需要纠正？

来源

2016-07-05 StrugglingCoder

您是否尝试过'max-width：0'技巧？它应该放在'table-cell'规则中。 –

@MarcosPérezGude... wowww ...先生:)你是一个天才。 – StrugglingCoder

因此，让我添加一个答案，您接受其他答案，不解决问题。 –

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

来源

2016-07-05 07:06:31

文本溢出省略号不会在表格单元显示，所以你可以使用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。

来源

2016-07-05 06:29:48

他们仍然没有内联。请参阅更新。 – StrugglingCoder

您尚未在跨度中定义类文件输入标签。 –

文本溢出省略号不起作用

回答

相关问题