Text Overflow Ellipsis not working

Question

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

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

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

What needs to be corrected ?

Did you tried the `max-width: 0` trick? It should be placed in the `table-cell` rule. — Marcos Pérez Gude, Jul 05 '16 at 06:44
So let me add an answer, you accept other answer that doesn't solve the problem. — Marcos Pérez Gude, Jul 05 '16 at 07:04

score 2 · Answer 1 · answered Jul 05 '16 at 06:29

Text-overflow ellipsis won't work in table-cell display, so you may use 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;
}

To make ellipsis in table-cell display, you should use sorts of css rules, for eg. width, table-layout...

Refer this google results: text overflow on table-cell display.

you have not defined the class file-input-label in the span. — Bhojendra Rauniyar, Jul 05 '16 at 06:49

score 1 · Accepted Answer · answered Jul 05 '16 at 07:06

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

Text Overflow Ellipsis not working

2 Answers2