Javascript Blogger:can'；t禁用自动换行

我正试图与博主融为一体。到目前为止，语法高亮显示效果很好，但我似乎找不到防止

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/solarized_dark.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js'/>
<script type='text/javascript'>
    hljs.initHighlightingOnLoad();
</script>

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/solarized_dark.min.css' rel='stylesheet'/>
<style type='text/css'>
pre, code {
    white-space: pre;
    overflow-x: scroll;
}
.hljs {
    display: inline-block;
    overflow-x: scroll;
    padding: 0.5em;
    padding-right: 100%;
    background: #002b36;
    color: #839496;
    -webkit-text-size-adjust: none;
}
</style>

<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js'></script>
<script type='text/javascript'>
    hljs.initHighlightingOnLoad();
</script>

我所有的使用实例都是：


//代码在这里；'“类”根据语言而变化。

我试图编辑Highlight.js CSS文件，但没有效果。我还尝试将

pre

和

code

样式

overflow-x

属性设置为

scroll

，但没有任何更改。我的猜测是Blogger在全球范围内覆盖了这个属性

有人知道如何克服这一问题，避免代码行在代码区的末尾换行/中断，而是显示水平滚动条吗？

打开后，作者确认换行不是由他的脚本完成的

在那之后，我对CSS做了一些修改，并通过覆盖highlight.js的

.hljs

样式解决了这个问题。这是我阻止文本换行并允许滚动的唯一方法。这可能不是最好的或唯一的修复方法，但就我对CSS的了解而言。以下是我添加到Blogger模板中的代码

.hljs {
    white-space: pre;
    overflow-x: auto;
}

预编码{
空白：预处理；
溢出-x：滚动；
}
.hljs{
显示：内联块；
溢出-x：滚动；
填充：0.5em；
右：100%；
背景#002b36；
颜色：#839496；
-webkit文本大小调整：无；
}
hljs.initHighlightingOnLoad（）；

---

我已将

display

更改为

inline block

，并添加了

overflow-x:scroll

和

padding right:100%

。填充似乎可以防止代码区域缩小到最长文本行的大小。

我做的一件事解决了这个问题，就是将hljs元素的宽度设置为非常大。这不是一个最佳的解决方案，但它是有效的

.hljs {
  display: inline-block;
  white-space: pre;
  overflow-x: auto;
  padding: 0.5em;
  color: #333;
  background: #f8f8f8;
}

这对我有用

---

自定义github.css中的.hljs样式，并将其放在页面中的github.css之后

---

不适合我。请检查您的答案是否与html页面完全匹配。你的网页是公开的吗？在这种情况下，一个网址将是伟大的。谢谢嗨，拉里克。不幸的是，我不再使用Blogger，所以那个页面不见了，我无法查看。我放弃它的原因之一确实是因为我想要更好地控制HTML/CSS。我敢肯定，问题在于显示和溢出属性。我建议您尝试使用浏览器的“开发人员工具”菜单中的live CSS编辑器调整这些参数。这样调试此类问题容易得多。

.hljs {
    white-space: pre;
    overflow-x: auto;
}

.hljs {
  display: inline-block;
  white-space: pre;
  overflow-x: auto;
  padding: 0.5em;
  color: #333;
  background: #f8f8f8;
}