Javascript / angularjs cut line to fit in div
in my angular / ionic mobile app, i followed the message list. Now I want to change it so that if the post text is wider than the div container it should cut the line and add 3 dots.
My message list looks like this:
<ion-list ng-repeat="message in messages">
<ion-item can-swipe="true" class="item-icon-left item-icon-right">
<i class="icon ion-email-unread"></i>
<div class="row">
<span class="col col-50">
<h2>{{message.title}}</h2>
</span>
<span class="col col-50 content-right text-small">
{{message.dateString}}
</span>
</div>
<div class="row">
<span class="col text-small">
{{message.text}}
</span>
</div>
<i class="icon ion-chevron-right"></i>
<ion-option-button class="button-dark">
More
</ion-option-button>
<ion-option-button class="button-assertive">
Delete
</ion-option-button>
</ion-item>
</ion-list>
How can I do this dynamically so that it really depends on the device / container width?
source to share
You don't do this with JS.
Just use CSS properties overflow
and text-overflow
:
div {
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
}
<div>1234567890123456789012345678901234567890</div>
source to share
You can achieve this easily by using CSS and width
styling and styling text-overflow
with a value for your content elipsis
.
#crop-text {
/* essential */
text-overflow: ellipsis;
width: 160px;
white-space: nowrap;
overflow: hidden;
/* for good looks */
padding: 10px;
border: 1px #000 solid;
}
<div id="crop-text">Hello, this is a really long text string.</div>
This guide explains what you need to do. http://davidwalsh.name/css-ellipsis
source to share