css样式:
width: 300px;text-overflow: ellipsis;overflow: hidden;
此时的设置可以完美实现文本框中的内容超长显示为省略号;但是想知道全部内容是不可能的。
<div title="文本框中的内容,超长显示省略号">文本框中的内容,超长显示省略号</div>
采用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时,样式会正常显示,因为这个属性的含义是:文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止;这样就保证了文本在一行中显示,不会出现换行后不省略文本的情况;
总结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(浏览器前缀处理工具)会自动移除老式过时的代码,所以先关闭这个工具再打开,防止代码被移除;
如果觉得《css实现文本框中内容超出长度显示省略号 鼠标移入悬浮显示全部内容》对你有帮助,请点赞、收藏,并留下你的观点哦!