css - 仅当内容拉伸(stretch)时才展开 CSS Div

Question

我正在开发一个新的博客网站，它将记录我的代码等。我有一个语法荧光笔，看起来像下图...

---

---

我有这个 CSS

.syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow: auto !important;
  overflow-y: hidden !important;
  font-size: .9em !important;
}

.syntaxhighlighter:hover {
  width: 135% !important;
}

正如您在图片中看到的，语法高亮代码具有一定的宽度以适合我的布局，我正在尝试在悬停时使其更宽，因为存在使其比我的内容 div 更宽的代码。

那是我添加 .syntaxhighlighter:hover 类的地方，当我将鼠标悬停在 sytax highlighter div 上时，它会扩展到我设置的宽度。现在，如果可能的话，我唯一希望改变的是......

如果其中的代码超出正常宽度，我只想以某种方式扩展荧光笔 div 的宽度。

谁能帮我解决这个问题？

Answer 1

您可以尝试设置 min-width: 100%; 然后设置 display:inline-block; 这意味着宽度由内容(具有预先格式化的内容意味着它也不会换行)，但它不会因为最小宽度而不适本地收缩。您可能会发现还需要设置一个 max-width。

另外:小心不要过度使用 !important 指令 - 如果您对选择器有特定要求，通常它是不必要的，有时它会扰乱可访问性(例如，如果有人需要覆盖用于查看网页的样式表)。