如何限制AngularJS中<td>条目中显示的字符[重复]

Posted 2023-03-05

【中文标题】如何限制AngularJS中<td>条目中显示的字符[重复]

【英文标题】：How to limit the characters displayed in a <td> entry in AngularJS [duplicate]

【发布时间】：2015-04-15 00:23:46

【问题描述】：

我有一张表格，我想知道如何限制 <td> 条目中显示的字符数，以便如果超过限制，则显示“...”，可能允许用户单击它让它扩展。

<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> 太长，那么列会变高但不会变宽。

【问题讨论】：

Angular 有一个内置的过滤器'limitTo'，它可以做到这一点，非常容易使用。 docs.angularjs.org/api/ng/filter/limitTo

【参考方案1】：

在我看来是 AngularJS 的完美应用Filters

用法类似于：

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

【讨论】：

好的，我使用了它，但是如果我想要添加“...”的功能并能够单击它以查看被截断的其余部分怎么办？

您将无法使用过滤器获得所需的点击行为。我相信你现在处于 AngularJS 指令领域。

如何在 Angular 4 中做到这一点？

我用切片解决了。谢谢。

【参考方案2】：

您可以在 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 了解更多信息）

【讨论】：

不适用于tds。

我编辑了答案以包含所需的 CSS 行

max-width 为tds 解决了问题。 width 不起作用。