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 }'即鼠標移動上去顯示的內容。

實際效果：