html表格字数显示,如何使table表格td中超出的文字以省略号显示 |
您所在的位置:网站首页 › 表格字全部显示 › html表格字数显示,如何使table表格td中超出的文字以省略号显示 |
在现实开发中经常会遇到文字过长导致用户体验度不好的现象,所以我们常用到的解决方法就是使过长的文字隐藏显示省略号,鼠标滑过显示完整的文字,这样既解决了文字过长的问题,又使得用户体验更好。关键是纯css就能搞定,接下来就为小伙伴们介绍详细实现方法。 我们在控制一个div里的内容很简单,设置div的宽度,利用white-space: nowrap;使内容不换行,而超出这个宽度的用overflow: hidden;隐藏超出的内容,并通过text-overflow: ellipsis;显示省略号,即可实现想要的效果。 HTML代码: css代码: .wrap{ width: 150px; //设置需要固定的宽度 white-space: nowrap; //不换行 text-overflow: ellipsis; //超出部分用....代替 overflow: hidden; //超出隐藏 } 如果需要鼠标移动过去的时候显示全部文字,也很简单,给title赋值就可以了,利用html的属性,是最好的解决办法,如果有更好的办法,可以告诉我哦! 效果: 上面只是抛砖引玉,对于table表格td内容省略号这不单单是上面css就能实现的,还需要用到table |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |