css实现内容超出显示省略号且触碰显示完整内容
css实现内容超出显示省略号且触碰显示完整内容
·
css 样式
- 此时的设置可以完美实现文本框中的内容超长显示为省略号,但是想知道全部内容是不可能的
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- 采用 title 属性后,就可以悬浮展示文本框中的内容;但是有个弊端,就是长度没有很长的时候,文本框中的全部内容能全部展示,此时的悬浮是没有必要存在的,但是实际上还是有的;
<div title="文本框中的内容,超长显示省略号">文本框中的内容,超长显示省略号</div>
- 对于展示文本框中全部内容还有两种方式实现
// 方法一,放开宽度限制
div:hover {
width: auto;
}
// 方法二,释放截取,即不显示省略号
div:hover {
text-overflow: inherit;
overflow: visible;
white-space: pre-line;
}
更多推荐
已为社区贡献1条内容
所有评论(0)