用一行css,解决掘金社区的按钮变形

188 阅读1分钟

各位最近在刷社区的时候有没有发现一个很奇特的功能那就是社区的AI功能,这个东西无处不在当我们浏览文章的时候选中内容那么就激活AI功能,会出现一个AI提问

image.png

来说一下我发现的问题吧,那么就是在靠近右侧的区域选中了文章内容激活AI功能时候,AI提问这个按钮就会出现变形的情况。(我不知道其他的电脑会不会这样,我用的 MacBook 13寸 M2 32+1TB 【手动狗头】 如图:⬇️)

20240722203059.gif

好咱们来调试看看能不能用css来解决这个小问题,先检查一下这个元素的样式.context-menu,可以看到是没有设置任何宽高的。元素被挤到这个小角落宽度不够然后进行了换行。我的第一反应就是给他加一个white-space: nowrap;,先保证内容不换行。

image.png

紧接着又遇到了这样的一个问题,被超出隐藏了,那么是不是他的父元素存在overflow: hidden;呢。

image.png

我找啊找,找到了在他爷爷身上有一个overflow: hidden;属性,咱们去掉试一下。(后续也没有发现这个属性对页面布局有什么影响,不确定是否有其他作用)

image.png

如图下面展示的就很完整了,不知道掘金大大的UI同学是否满意。

image.png

以上是我个用css最简陋的解决方法

相信掘金大大官方肯定有更好的方法。比如在获取位置的时候做一下距离右边的判断[旺柴][旺柴]