Ellipsis to limit text length not working

ionic-v1
1

Hi,

I have the following code:

div class="list">
<a ng-repeat="dataitem in dataitems" class="item item-icon-left" href="#/dataitems/{{dataitem.id}}">
    <i ng-if="dataitem.status == 'active'" class="icon ion-ios7-circle-filled" style="color: green"></i>
    <i ng-if="dataitem.status != 'active'" class="icon ion-ios7-circle-filled" style="color: red"></i>
    <div class="row">
        <div class="col">
            <strong style="text-transform: uppercase">{{dataitem.name}}</strong><br />
            {{dataitem.description}}
        </div>
        <div class="col" style="text-align: right">
            <span style="text-transform: uppercase">{{dataitem.type}}</span><br />
            {{dataitem.note}}
        </div>
    </div>
</a>

I’ve run into the situation where my {{dataitem.name}} and {{dataitem.type}} run long and overlap into the neighboring column. What I’d like to do is limit both columns to 50% and do an ellipsis to chop the text if it runs longer replacing with a “…” however, every time I try it doesn’t seem to do anything.

What is the correct way to do this in IonicFramework?

Thanks,

2

Use col-50 for the width and this css

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
3 Likes
3

This worked.

Thanks!