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

Question

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

我试过这个：

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

但它不能正常工作

它看起来像这样：

文本继续向左边缘。 （我的html页面的方向是RTL Right to Left）

有什么建议吗？

Answer 1

overflow-x: hidden切断文本，但不包装它。

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

pre {
  white-space: pre-wrap;
}

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

Answer 2

尝试添加这个：

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 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+ */
}