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>

顯示效果如下: