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

Question

在我的 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>

我怎样才能动态地做到这一点，使其真正取决于设备/容器的宽度？

Answer 1

你不能用 JS 来做。

只需使用 CSS 的 overflow 和 text-overflow 属性:

div {
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div>1234567890123456789012345678901234567890</div>