CSS文字超出用省略号...鼠标悬停显示全部文字

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 }'即鼠标移动上去显示的内容。

实际效果：