css实现文本框中内容超出长度显示省略号,鼠标移入悬浮显示全部内容 | 您所在的位置:网站首页 › 自动换行怎么显示全部 › css实现文本框中内容超出长度显示省略号,鼠标移入悬浮显示全部内容 |
css样式: width: 300px; text-overflow: ellipsis; overflow: hidden;此时的设置可以完美实现文本框中的内容超长显示为省略号;但是想知道全部内容是不可能的。 文本框中的内容,超长显示省略号采用title属性后,就可以悬浮展示文本框中的内容;但是有个弊端,就是长度没有很长的时候,文本框中的全部内容能全部展示,此时的悬浮是没有必要存在的,但是实际上还是有的; 对于展示文本框中全部内容还有两种方式实现: // 方法一,放开宽度限制 div:hover{ width: auto; } // 方法二,释放截取,即不显示省略号 div:hover{ text-overflow:inherit; overflow: visible; white-space: pre-line; }这两种方法都有一个明显的弊端,不管是放开宽度限制,还是释放overflow的截取,都会导致界面布局的错乱,即会影响其他元素的布局效果; 补充内容: 缺陷场景:一句超长文本,在span中展示,但是span宽度只有100px,导致文本是换行展示的,这时再用text-overflow: ellipsis;overflow: hidden;属性无法实现省略号的样式; 原因分析:span中添加了属性white-space:normal; 当行内样式添加了属性white-space:normal时,显示省略号的样式会不生效; 这个属性是布局建立过程中,对空白符的处理,normal值是忽略全部的空白; 而当参数值为nowrap时,样式会正常显示,因为这个属性的含义是:文本不会换行,文本会在在同一行上继续,直到遇到 标签为止;这样就保证了文本在一行中显示,不会出现换行后不省略文本的情况; 总结or结论:省略超出文本,以省略号展示的样式设计时, 单行文本的省略:(已验证) 正确必备的属性是width、overflow、text-overflow; 不必备的属性:white-space,值为nowrap;适用于宽度很小,内容很长时,固定文本在一行中展示,切不可用normal属性值!!! 多行文本的省略:(未验证autoprefixer工具) 必备属性: width: 300px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; /*3表示只显示3行*/ /* autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */注释掉的两行作用:autoprefixer(浏览器前缀处理工具)会自动移除老式过时的代码,所以先关闭这个 工具再打开,防止代码被移除; |
CopyRight 2018-2019 实验室设备网 版权所有 |