如何在 HTML pre 标签中禁用水平滚动

Question

我正在尝试禁用 HTML pre 标签中的水平滚动

我试过这个：

pre {
    height: auto;
    max-height: 500px;
    overflow:hidden;
    background-color: #eeeeee;
}

但它不能正常工作

它看起来像这样：

文本继续向左边缘。 （我的html页面的方向是RTL从右到左）

有什么建议吗？

Answer 1

overflow-x: hidden 切断文本，但不换行。

white-space CSS 属性改为设置元素内部空白的处理方式； pre-wrap 保留空白序列，在换行符处换行，在<br> 处换行，并根据需要填充行框。

pre {
  white-space: pre-wrap;
}

这篇文章提供了很多关于 pre 标签的重要信息：https://mediatemple.net/blog/tips/considerations-for-styling-the-pre-tag/

Answer 2

答案在这篇文章中找到：How do I wrap text in a pre tag?

pre {
    white-space: pre-wrap; /* Since CSS 2.1 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

Answer 3

尝试添加这个：

text-align: right !important;
overflow-x: hidden !important;

另外，这篇文章可能对您的工作很有趣：https://alfy.me/2014/07/26/lets-talk-about-rtl.html

希望对您有所帮助！好编码！ ;)

编辑：

我会解释自己。

通过添加text-align: right !important;，我们强制文本正确对齐，将您的网站作为 RTL，这是要走的路。

通过添加overflow-x: hidden !important; 表示我们不希望水平滚动。

!important 语句用于优先考虑此 css 规则，用于覆盖其他样式。