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?

Also, you want to apply `text-align: right;` – SrAxi Mar 21 '17 at 09:13 — SrAxi, Mar 21 '17 at 09:13

score 12 · Answer 1 · edited Dec 29 '20 at 20:37

12

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/

edited Dec 29 '20 at 20:37

Ghini Antonio

2,992
2
25
48

answered Dec 10 '19 at 04:44

kashgo

141
1
6

Work! Right answer – Ghini Antonio Dec 29 '20 at 20:22

SrAxi · Answer 2 · 2017-03-21T09:25:08.983

1

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.

edited Mar 21 '17 at 09:25

answered Mar 21 '17 at 09:19

SrAxi

19,787
11
46
65

When you start using `!important` there is no way back :) there is always a way to get around without using it. – Morpheus Mar 21 '17 at 09:59
The same problem again currently the text keep going to the left edge i want to make the text stop at specific limit, then start a new line. – askm Mar 21 '17 at 10:02
@Morpheus Yes, indeed. `!important;`is a Rambo solution, but I figured out that @askm had to override styles – SrAxi Mar 21 '17 at 10:06
@askm Then I think that your question wasn't well explained or I understood badly. If you want the text not to 'touch' the edge of the screen. Put your text inside a container (div) and give it a size and a position so you can control it. Also, read the article I linked, it can help you with the style of website you want to make. Cheers! – SrAxi Mar 21 '17 at 10:08

score 1 · Answer 3 · edited Jun 25 '20 at 12:53

1

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

edited Jun 25 '20 at 12:53

Ooker

1,969
4
28
58

answered Apr 15 '20 at 00:45

dripcode

31
2

How to disable horizontal scrolling in HTML pre tag

3 Answers3