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/

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.

Answer is found in this post: 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+ */
}