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;
}

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?

• javascript
• jquery
• html
• css
• web-frontend

• try overflow-x – A. L Commented Mar 21, 2017 at 9:11
• Also, you want to apply text-align: right; – SrAxi Commented Mar 21, 2017 at 9:13

3 Answers 3

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