Question

我有一张桌子，我想知道如何限制<td>条目中显示的字符数量，这样如果超过限制条件，就可以了解...＆＃39; ...＆＃39;显示，可能允许用户单击它以使其展开。

<table st-table="displayedCollection" st-safe-src="main.quizCollection" class="table table-striped table-condensed table-bordered" ng-show="main.tab === 'active'">
        <thead>
            <tr>
                <th st-sort="Internal.quizName">Name</th>
                <th st-sort="Internal.description">Description</th>
                <th st-sort="Internal.dateCreated">Date Created</th>
                <th st-sort="Internal.timesTaken">Times Taken</th>
                <th>URL</th>
                <th>View More</th>
                <th>Copy</th>
                <th>Export</th>
                <th>Deactivate</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="quiz in displayedCollection | filter:'active': true">
                <td>{{quiz.Internal.quizName}}</td>
                <td>{{quiz.Internal.description}}</td>
                <td>{{quiz.Internal.dateCreated}}</td>
                <td>{{quiz.Internal.timesTaken}}</td>
                <td><button class="btn btn-default" clip-copy="main.copyURL(quiz)"><i class="fa fa-share-square-o"></i></button></td>
                <td><a href="#/view-more/{{quiz.$id}}" class="btn btn-info"><i class="fa fa-eye"></i></a></td>
                <td><a href="#/copy/{{quiz.$id}}" class="btn btn-default"><i class="fa fa-clipboard"></i></a></td>
                <td><button class="btn btn-default" ng-csv="main.export(quiz)" csv-header="main.csvHeader" lazy-load="true" filename="{{quiz.Internal.quizName}}.csv"><i class="fa fa-floppy-o"></i></button></td>
                <td><button class="btn btn-danger" ng-click="main.deactivate(quiz)"><i class="fa fa-ban"></i></button></td>
            </tr>
        </tbody>
    </table>

我正在使用ng-smart-table。另一个解决方案是，如果<td>太长，那么列会变得更高但不会更宽。

Answer 1

您可以在CSS中执行此操作。设置列的max-width并应用text-overflow: ellipsis。例如：

<td class="ellipsis">{{quiz.Internal.description}}</td>

并在你的CSS中：

.ellipsis {
    max-width: 40px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

（有关详细信息，请参阅this answer）

Answer 2

对我而言似乎是AngularJS的完美应用Filters

用法如下：

<td>{{quiz.Internal.quizName | limitChars:20}}</td>

如何限制AngularJS中条目中显示的字符

2 个答案: