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

实际效果：

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

quill鼠标悬浮出现提示_html实现鼠标悬停显示气泡文字内容
需求描述:当鼠标悬停在一个元素上的时候,显示气泡,气泡内容可以是一段文字或图片.实现如下: html> 气泡显示 .container { margin-top: 130px; } #xszti ...
超出限定字段截断，鼠标悬停显示全部文字
需求:超出6个字符后显示...,当鼠标悬停上去后显示全部文字可以使用过滤器来实现 <mtd-table-column prop="address" label=" ...
在td标签中文字超出显示省略号，鼠标悬停显示所有文本
在td标签中文字超出显示省略号,鼠标悬停显示所有文本首先得在table的style中加入table-layout:fixed,让表格固定,然后用width设定表格的宽度. 然后表格中所有的列都一样宽 ...
CSS文字超出部分省略号显示
文章目录[隐藏] CSS 文字超出部分省略号显示前言 CSS 文字超出部分省略号显示实现方法 CSS 文字超出部分省略号显示实现效果 CSS 文字超出部分省略号显示前言在我们开发过程中,其实有这样的 ...
html鼠标悬停出现新元素,CSS：我如何将鼠标悬停在一个元素上，并显示另一个元素？...
我有一个导航面板,当您将鼠标悬停在灯具上时,它会显示从主导航面板下拉的面板中的前5个灯具.CSS:我如何将鼠标悬停在一个元素上,并显示另一个元素? 我试图实现这个使用CSS与:hover. 这是:h ...
html用title属性实现鼠标悬停显示文字
实现鼠标悬停显示文字,html中使用title属性就可实现显示文字的效果,这个属性还是比较实用的,需要的朋友可以参考下 <a href=# title="这里是显示的文字"& ...
html 鼠标悬停显示文字
<a href=# title="这里是显示的文字">hello</a> 当鼠标悬停在 hello上一回就会有文字这里是显示的文字显示.
Html字母变大的代码,css鼠标选中字体变大 div css鼠标悬停超链接的文字变大
css鼠标选中字体变大 css鼠标悬停超链接的文字变大 CSS布局鼠标悬停在超链接上字体变大,css实现鼠标经过锚文本文字时改变字体大小篇. 实现这一效果需要的是:hover伪类设置需要字体. 鼠标选 ...
css文字超出部分省略号
css文字超出部分省略号 overflow:hidden;text-overflow:ellipsis;white-space:nowrap;

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

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

最新文章

热门文章