angular6 限制文本长度，多余部分点点点显示

需求

限制多余文本长度，以'......'替代，并且鼠标移动到上方显示全部文字信息。

效果图

代码

html

......
    <tr nz-tbody-tr *ngFor="let data of basicTable.data">
        <td nz-td nzCheckbox>
            <label nz-checkbox [(ngModel)]="data.checked" (ngModelChange)="_refreshStatus($event)">
            </label>
        </td>
        <td nz-td [title]="data.zdBh">{{data.zdBh}}</td>
        <td nz-td [title]="data.xzqDm">{{data.xzqDm}}</td>
        <td nz-td [title]="data.mj">{{data.mj}}</td>
        <td nz-td [title]="data.tdYtMc">{{data.tdYtMc}}</td>
        <td nz-td [title]="data.zdZl">{{data.zdZl}}</td>
    </tr>
......

ts中的style

@Component({
    selector: 'app-gyzd-list-multi',
    templateUrl: './app-gyzd-list-multi.component.html',
    styles: [`
        /*限制字符串长度*/
        tr td {
            max-width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }
    `]
})

 

解释：tittle可以显示全部信息，利用tr td的css样式可以得到效果图