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

Question

我试图禁用HTML预标签中的水平滚动

我试过这个：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但它无法正常工作

它看起来像这样：

文字继续向前发展。 （我的html页面的方向是RTL从右到左）

有任何建议吗？

Answer 1

尝试添加此内容：

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规则，它用于覆盖其他样式。

Answer 2

我发现以下换行的长行阻止了水平滚动：

pre {
  white-space: pre-wrap;
}

overflow-x：隐藏；切断文本，但不包裹文本。 本文提供了有关pre标签的大量详细信息：https://mediatemple.net/blog/tips/considerations-for-styling-the-pre-tag/

Answer 3

此帖子中找到答案：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+ */
}