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
The text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis (' … '), or display a custom string.
Solution # 1: Truncate text for single line This solution works for single-line truncation. Force text to be on a single line: white-space: nowrap; Now, our text should be on the same line and should overflow from the box if it's long enough and wrapped before.
The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (...), or display a custom string.
We can solve this problem by using CSS overflow property. overflow: hidden; hidden – The overflow is clipped, and the rest of the content will be invisible.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With