html表格中单元格内容超出不换行和超出宽度自动隐藏并显示省略号及鼠标移入显示全部内容/移出隐藏(用title属性)

参考https://www.cnblogs.com/yy-hh/p/4523939.html

在表格布局中经常会遇到因为表格内容长短的变化导致错位布局混乱的情况，这个时候我们可能会有为了布局稳定把单元格宽度写死；

但是我们设置了宽度却发现内容超出了宽度之后会自动变大，页面显示错乱,用css定义元素的overflow:hidden;属性也不行；解决方案如下：

table{
    table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
}
td{
    width:100px;//宽度根据每一个可以在再html中设置不同class
    white-space:nowrap;/* 不换行 */
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}
效果如图

但是这样看不到完整的单元格内容建议在单元格上面加上title属性值,只要包裹文字的父标签有 title 属性，就会有这个效果了，父元素标签可以是div，span，p，a，table ，tr，td，几乎啥都可以的,
就是单元格的完整内容这样只要鼠标经过就能显示全部了,因为我用的是VUE如下  :title (angularjs中ng-attr-title 或title)

vue:
<td class="width100" v-for="(ghcl,index1) in name.ghcl" v-if="index1>0" :title="ghcl">{{ghcl}}</td>
angular:

<div class="text-center" style="padding:0; padding-left:10px; height:25px; line-height:25px;" ng-attr-title="{{application.displayName}}">{{ application.displayName | truncate : 20 }}</div>
或

<div class="text-center" style="padding:0; padding-left:10px; height:25px; line-height:25px;" title="{{application.displayName}}">{{ application.displayName | truncate : 20 }}</div>

显示效果如下: