CSS文本溢出图标

Question

嘿，我右边有一个可点击的图标，我的文字溢出来了。我该如何解决？

Codepen.io示例：http://codepen.io/anon/pen/XmPmba

  

图片：

  

码

<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

您应该设置宽度width属性，然后设置overflow:hidden。 喜欢这个

<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>

根据您的需要更改宽度值。