Html CSS文本溢出图标

嘿，我在右边有一个可点击的图标，我的文字溢出了它。我怎么修理它

Codepen.io示例：

图像：

代码：

{{x.title}}

您应该设置宽度

width

属性，然后设置

溢出：隐藏。
像这样

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


{{x.title}}

根据您的需要更改宽度值。
您能用输出的HTML和CSS制作一个工作演示吗？可能是@Thailie的副本，工作正常，但我希望宽度为全宽。屏幕宽度-40px；因为有时候用户可能想旋转他们的屏幕..在这种情况下，你可以使用%。。。再说一次，那也不行。因为我只想在右边显示图标，所以如果我设置25%的宽度，使用ipad的用户将看到很长的空栏，如果可以的话，请不要提供屏幕短栏。。基本上，你应该测试文本和图标的不同宽度，然后设置一些类似的位置。。和