How to disable horizontal scrolling in HTML pre tag

Question

I'm trying to disable horizontal scrolling in HTML pre tag

I'v tried this:

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

but it does not work correctly

it appear like this:

The text keep going to left edge. (the direction of my html page is RTL Right to Left)

Any Suggestion?

Answer 1

overflow-x: hidden cuts the text off, but doesn't wrap it.

The white-space CSS property instead sets how white space inside an element is handled; pre-wrap preserve sequences of white space, lines are broken at newline characters, at <br>, and as necessary to fill line boxes.

pre {
  white-space: pre-wrap;
}

This article gives a lot of great info on the pre tag: https://mediatemple.net/blog/tips/considerations-for-styling-the-pre-tag/

Answer 2

Try adding this:

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

Also, this article could be interesting for your work: https://alfy.me/2014/07/26/lets-talk-about-rtl.html

Hope it helped! Good coding! ;)

Edit:

I will explain myself.

By adding text-align: right !important; we are forcing the text to be aligned right, being your website a RTL, this is the way to go.

By adding overflow-x: hidden !important; we are saying that we don't want horizontal scrolling.

The !important statement is used to give priority to this css rule, it is used to override other styles.