How to limit the characters displayed in a <td> entry in AngularJS [duplicate]

Question

I have a table and I am wondering how I can limit the number of characters displayed in the <td> entries so that if one goes over the limit a '...' is displayed, possibly allowing a user to click it for it to expand.

<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>

I'm using ng-smart-table. The other solution would be that if a <td> is too long then the column gets taller but not wider.

Answer 1

You can do this in CSS. Set the max-width of the column and also apply text-overflow: ellipsis. For example:

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

and in your CSS:

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

(see this answer for more info)

Answer 2

Seems to me like a perfect application of AngularJS Filters

Usage would be something like:

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