html - CSS 文本溢出图标

Question

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

Codepen.io 示例: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

您应该设置宽度 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>

根据需要更改宽度的值。