0
353
ViewsHow to disable horizontal scrolling in HTML pre tag
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?
3 answers
Answer question0
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/
0
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.
0
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+ */
}