Home CSS

How to Wrap Text in PRE Tag?

October 24, 2018
A+ A- Print Email
In HTML, if you are using PRE tag for preformatted text and the text is getting hidden, then use white-space and overflow-x CSS values for PRE tag. Below is the example:

CSS To Wrap Text in PRE Tag

pre {
    position: relative;
    max-width: 800px;
    padding: 30px 15px;
    background: #f7f7f7;
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre-wrap;
    font-size: 14px;
    color: #666666;
    border-left: 3px solid #7b7b7b;
    overflow-x:scroll;
}

The output of the above CSS would be the same as it is displaying above for CSS code. Below is the image:

Wrap text in PRE tag using CSS