CSS text is overflowing icon

Question

Hey I have a clickable icon on the right and my text is overflowing it. How do I fix it ?

Codepen.io example: http://codepen.io/anon/pen/XmPmba

image:

code:

 <ons-list-item modifier="tappable" ng-repeat="x in results" style="white-space: nowrap;"> <ons-row> <ons-col> {{ x.title }} </ons-col> <ons-col width="40px"> <ons-icon icon="fa-ellipsis-h" size="22px" style="background-color:red"></ons-icon> </ons-col> </ons-row> </ons-list-item> 

Answer 1

You should set a width width property and then set overflow:hidden . Like this

<ons-list-item modifier="tappable" ng-repeat="x in results" style="white-space: nowrap;">
  <ons-row>
    <ons-col style="width:80px;overflow:hidden;">
      {{ x.title }}
    </ons-col>
    <ons-col width="40px">
      <ons-icon icon="fa-ellipsis-h" size="22px" style="background-color:red"></ons-icon>
    </ons-col>
  </ons-row>
</ons-list-item>

change the value of width according to your need.