StrugglingCoder StrugglingCoder - 5 months ago 74
CSS Question

Text Overflow Ellipsis not working

I know display type table-cell does not work with text - overflow ellipsis . But this is what my problem is like .

I have a file input control that looks like

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


Now when you select a file that file name should be displayed on the span text.

The CSS looks like :

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


When we select a big file name the span gets expanded . It does not come with dotted line...

enter image description here

I tried to convert the display to block but it messes the 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;
}


enter image description here

enter image description here

They are not inline now .. the browse button and the span element are not inline.

Even display:inline-block did not help much

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


I thought to set the display of span

<span class="input-group-btn" style="display:inline-block;">


but even this produces

enter image description here

What needs to be corrected ?

Answer

If you don't want to change the display: table-cell you have available the max-width: 0 trick to a cell. It allows to specify the table something that it can be applied the text-overflow. So your changes should be:

.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 **/
}
Comments