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

需求

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

效果图

代码

html

......
    
        
            
            
        
        {{data.zdBh}}
        {{data.xzqDm}}
        {{data.mj}}
        {{data.tdYtMc}}
        {{data.zdZl}}
    
......

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样式可以得到效果图