如果它太长，我想包装类别名称

Question

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
  <div class="tabs" style="margin-top: 1px;">
    <a class="tab-item" ng-repeat="category in categories" ng-class="{ active: isCategory(category) }"
          ng-click="categoryFunction(category,$index)">
          {{category.name}}
    </a>
  </div>
</div>

我希望类别名称如果太长则被包装

Answer 1

你可以这样使用

{{ category.name | limitTo: 10 }}

Answer 2

包装内容可以使用

white-space: normal;

或

word-wrap: break-word;

Answer 3

您可以设置固定宽度并截断任何溢出的文本，例如

.tab-item {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}