文本溢出省略號不起作用

我知道顯示類型表格單元格不適用於文本溢出省略號。但這就是我的問題所在。文本溢出省略號不起作用

我有一個看起來像

<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

您尚未在跨度中定義類文件輸入標籤。 –

文本溢出省略號不起作用

回答

相關問題