javascript/angularjs剪切字符串以适合div

在我的angularjs/ionic移动应用程序中，我实现了一个消息列表。现在我想修改它，这样如果消息文本比div容器宽，它应该剪切字符串并添加3个点

我的邮件列表如下所示：

<ion-list ng-repeat="message in messages">
        <ion-item can-swipe="true" class="item-icon-left item-icon-right">

          <i class="icon ion-email-unread"></i>

          <div class="row">
            <span class="col col-50">
              <h2>{{message.title}}</h2>
            </span>
            <span class="col col-50 content-right text-small">
              {{message.dateString}}
            </span>
          </div>

          <div class="row">
            <span class="col text-small">
              {{message.text}}
            </span>
          </div>

          <i class="icon ion-chevron-right"></i>

          <ion-option-button class="button-dark">
            More
          </ion-option-button>
          <ion-option-button class="button-assertive">
            Delete
          </ion-option-button>
        </ion-item>

      </ion-list>

{{message.title}
{{message.dateString}
{{message.text}
更多
删除

---

如何动态地执行此操作，使其真正取决于设备/容器的宽度

JS不能这样做

只需使用CSS的

溢出

和

文本溢出

属性：

div{
宽度：50px；
溢出：隐藏；
文本溢出：省略号；
}

---

12345678901234567134567890123456789012345678901234567890

您可以通过使用CSS，为内容指定

宽度，并添加
文本溢出
样式和
省略
值轻松实现这一点


#裁剪文本{
/*必要的*/
文本溢出：省略号；
宽度：160px；
空白：nowrap；
溢出：隐藏；
/*为了好看*/
填充：10px；
边框：1px#000实心；
}
您好，这是一个很长的文本字符串。
您可以添加：在内容之后使用。。。而溢出hiddenThis仅适用于固定宽度，这与响应速度中的流动文本相冲突design@dube：
溢出：隐藏；文本溢出：省略号在具有动态宽度的元素上运行良好。为我的简短评论道歉。您的示例之所以有效，是因为文本是一个单独的大字。如果您添加“空白：nowrap”，它也适用于真实文本。然而，多行文本（这里没有要求）并没有乐趣。嗯，那样的话，我能帮上忙，@dube。