javascript - Truncate ellipsis without width - Stack Overflow

admin管理员组

文章数量:1208155

I'm trying to achieve a responsive list width text-overflow: ellipsis; in the first cell that looks like this:

A one-lined text that is too long and has to be... | Button 2 |

The whole list should have width: 100%; to be as large as the device. I can't set a fixed width on Button 2 since the application is multilingual (a max-width should be possible though).

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

Getting Output :

John Doe1 (2) John Doesdfsf...(3) Jo1 (4)

Expected output :

John Doe1(2) John Doesdfsf...(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

I'm trying to achieve a responsive list width text-overflow: ellipsis; in the first cell that looks like this:

A one-lined text that is too long and has to be... | Button 2 |

The whole list should have width: 100%; to be as large as the device. I can't set a fixed width on Button 2 since the application is multilingual (a max-width should be possible though).

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

Getting Output :

John Doe1 (2) John Doesdfsf...(3) Jo1 (4)

Expected output :

John Doe1(2) John Doesdfsf...(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

• javascript
• css
• angularjs

Share Improve this question Follow asked Apr 25, 2016 at 10:07 Gobinath MGobinath M 2,02166 gold badges2929 silver badges4747 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 18

It is working with max-width also:

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

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

本文标签： javascriptTruncate ellipsis without widthStack Overflow