CSS文字超出用省略號...鼠標懸停顯示全部文字

CSS設置屬性
.f-els3{width: 6.6rem; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;text-align: left;}
.f-els3_3{width: 1.5rem; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; text-align: center;}
width: 1.5rem; 寬度設置為相對值；
overflow: hidden; 超出部分隱藏；
text-overflow:ellipsis; 超出部分添加省略號；
white-space: nowrap; 不換行；
text-align: center; 文字居中；
注意：以上除了 white-space: nowrap; 可以對<td>標簽起作用，其他都不起作用，
所以需要把文字放在<div>中，即<td><div>文字</div></td>，這樣才能實現效果。
<table class="improve_table f-font4">     <thead>         <tr>             <th width="30%">項目名</th>             <th width="10%"><div class="f-els3_3">類別</div></th>             ……         </tr>     </thead>     <tbody id="projectList">         <c:forEach items="${projectDetailData}" var="var" varStatus="vs">             <tr>                 <td><div class="f-els3" title='${var.subject }'>${var.subject }</div></td>                 <td><div class="f-els3_3" title='${var.projectType }'>${var.projectType }</div></td>                 ……             </tr>         </c:forEach>     </tbody> </table>
title='${var.projectType }'即鼠標移動上去顯示的內容。
實際效果：