一个很简单的题 我遭遇了玄学bug 借此机会 记录一下 如果侥幸有大佬看到 那就有人可以给我解答了 那就更好了
写一个内容如果超出了块后面的文字就用“...”显示 鼠标移上去 就显现全部 ,看着很简单嘛
就直接给
.h{
text-overflow:ellipsis;
width: 70px;
border: 2px #fff000 solid;
white-space:nowrap;
overflow:hidden;
}
然后用hover 把overflow改一下 将隐藏的显现出来就可以了
.h:hover{
overflow:visible;
}
这个时候 使用h这个选择器的元素就不用在标签里设置style了 直接用选择器就好 如果是这样的话 就一点问题都没有了...
但是我偷懒了 我懒得写选择器 直接写在了style里 这个时候我再写
<div><p class="h" style="width: 70px;border: 2px #fff000 solid;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">kekeke咳咳咳</p></div>
<!-- 注意此时我根本没有写h这个选择器 样式全部写在了style里 -->
这个时候..再写hover是没有用的 【这只是一个警醒 不是玄学bug】
那么这个时候我再不规范一下 我写了一个h 但是我没写全 【因为懒 所以只剪切了一部分的样式到选择器里 于是遇到的这个bug】
.h{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
<div><p class="h" style="width: 70px;border: 2px #fff000 solid;">kekeke咳咳咳</p></div>
这个时候问题来了 文字它换行了???鼠标移上去的时候换行了...换不换行取决于它
white-space:nowrap;
后来反复试验 只要它放在了选择器里 且style里写有样式 这个时候 “不换行”就失效了... 这是为什么?? 有点玄学 猜测是因为优先级的问题 但是优先级也得是有冲突的时候 才体现的把 这几种属性样式 都跟他不冲突啊??
一个小小的问题...各种实践 发现了各种问题... 菜鸡就是容易踩坑.. 所以 多实践多动手
ps: 最好不要在盒子里套 子元素 这样的话 设置样式的话 要再细节一点