padding-right on :first-line 使用 CSS 更新

如何解决padding-right on :first-line 使用 CSS 更新

我正在手机上阅读 MDN 的 history.pushState() 页面，注意到我认为是文本错误：语法的最后一个参数中的 [ 后面应该有一个逗号。>

我去编辑页面，发现逗号确实存在；它被 ? 复制到剪贴板按钮隐藏。（奇怪的是，尽管 white-space: pre，Chrome iOS 将其视为 pre-wrap，而 Chrome 桌面则不然。）

对此的理想解决方案（除非修复 Chrome iOS）是设置第一行的 padding-right 的 CSS 样式。

@media screen and (max-width: /* ... */) {
/* or some other way to determine we're in a mobile browser */
  .code-example pre:first-line {
    padding-right: 41px;
  }
}

然而，这似乎被忽略了。我是不是做错了什么，或者——正如我怀疑的那样——这根本不可能？

另一种更简单的解决方案是将“复制到剪贴板”按钮的样式设置为

.code-example .copy-icon {
  display: block;
  margin-right: -16px;
  margin-top: -16px;
  float: right;
}

并将 <button> 移动到 <pre> 内。但是，就像 <table> 代替 display: grid 一样，float 已经过时了。

此外，如果不对移动浏览器进行条件检查，此更改将改变桌面/无错误移动浏览器的行为：

尽管 white-space: pre; overflow: auto，浏览器正在呈现换行。

假设 :first-line { padding-right } 不受支持，是否有另一种方法可以通过 CSS 或 JavaScript hack 实现相同的效果？

注意：我确实搜索了一个重复的问题，但每个结果都是关于缩进段落的第一行，其解决方案是:first-line { text-indent }。

更新

我假设根据定义，任何检测浏览器的解决方案都必须检测浏览器，我们可以使用 navigator.userAgent 检测有问题的浏览器，然后操作 DOM 并应用 {{ 1}} 到按钮。不过有点恶心。

解决方法

检查您提到的 MDN 页面，我注意到 <code> 中有一个 <pre> 元素。因此，您可以执行以下操作：

@media screen and (max-width: /* ... */) {
/* or some other way to determine we're in a mobile browser */
  .code-example pre code {
    display: block;
    max-width: 90%;
  }
}

这样，“复制到剪贴板”按钮就不会与代码重叠。