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>

Possible duplicate of [How can I show dots ("...") in a span with hidden overflow?](http://stackoverflow.com/questions/11426275/how-can-i-show-dots-in-a-span-with-hidden-overflow) — Thaillie, Nov 04 '15 at 12:50

score 0 · Answer 1 · answered Nov 04 '15 at 12:55

0

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.

answered Nov 04 '15 at 12:55

Anand Singh

2,343
1
22
34

That works correct, BUT I want the width to be full width. Screenwidth - 40px; Becuz sometimes users might want to rotate their screen.. – Benas Paulikas Nov 04 '15 at 15:25
you can use % in that case... and . – Anand Singh Nov 05 '15 at 05:47
Again that won't be okay. Because I only want to display icon on the right so if I set 25% width user with ipad will see very long empty column – Benas Paulikas Nov 05 '15 at 13:12
not getting provide a screen short if you can.. basically you shod test different width for text and icon and then set position some thing like this.. and – Anand Singh Nov 05 '15 at 13:21

CSS text is overflowing icon

1 Answers1