Geek Answers Handbook

Trimming an ellipse without width

I am trying to achieve flexible overflow of text as text: ellipsis; in the first cell, which looks like this:

One line text that is too long and should be ... | Button 2 |

The entire list should have a width of: 100%; be as big as the device. I cannot set a fixed width on Button 2, since the application is multilingual (maximum width should be possible).

I can try whatever I want ... only appears when setting a fixed width. How can I tell the middle cell to "use available space" without JavaScript?

Receive output:

John Dow1 (2) John Diddfsf ... (3) Jo1 (4)

Expected Result:

John Dow1 (2) John Diddfsf ... (3) Jo1 (4)

CSS

.truncate-ellipsis {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; 
        -o-text-overflow: ellipsis;
         width: 20%;
}

HTML:

<div ng-app="myApp" ng-controller="validateCtrl">
<ul>
<li><label class="truncate-ellipsis">{{title1}}</label>({{count1}})</li>
<li><label class="truncate-ellipsis">{{title2}}</label>({{count2}})</li>
<li><label class="truncate-ellipsis">{{title3}}</label>({{count3}})</li>
</ul>
</div>

Demo

+4
1

max-width:

.truncate-ellipsis {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis;
    max-width: 20%;
}

: https://jsfiddle.net/U3pVM/24348/

+3

More articles:


All Articles